@micromag/screen-quiz 0.3.349 → 0.3.356

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +132 -66
  3. package/lib/index.js +134 -67
  4. package/package.json +14 -13
package/assets/css/styles.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{position:relative;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.7!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-resultIcon{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;display:-ms-flexbox;display:flex;height:32px;justify-content:center;left:5px;margin-top:-16px;opacity:0;padding:5px;position:absolute;top:50%;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;width:32px}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-resultIcon .micromag-screen-quiz-answers-faIcon{display:block}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
2
2
  .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-question{margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-index{display:block;margin-bottom:1em;text-align:center;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-resultContent{padding:20px 0}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:0 auto;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion{height:60px;margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{height:100px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultVisible .micromag-screen-quiz-question-result{opacity:1;pointer-events:all;position:relative}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder{padding:10px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder .micromag-screen-quiz-question-index{color:hsla(0,0%,100%,.6);font-size:8px;mix-blend-mode:difference}
3
- .micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{padding:6px;position:relative}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;-o-transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-quiz-reset:hover{border:0;opacity:.8}.micromag-screen-quiz-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.micromag-screen-quiz-points{color:#fff;left:0;padding:10px;position:absolute;top:0;z-index:1000}.micromag-screen-quiz-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-callToAction a{padding:0}.micromag-screen-quiz-callToAction.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{opacity:1;-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;z-index:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{opacity:0;-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
3
+ .micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{padding:6px;position:relative}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;-o-transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-quiz-reset:hover{border:0;opacity:.8}.micromag-screen-quiz-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.micromag-screen-quiz-points{color:#fff;left:0;padding:10px;position:absolute;top:0;z-index:1000}.micromag-screen-quiz-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-header.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-footer a{padding:0}.micromag-screen-quiz-footer.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{opacity:1;-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;z-index:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{opacity:0;-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
4
4
  .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-title{margin-bottom:10px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:0 auto;width:100%}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{height:60px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription{height:100px}.micromag-screen-quiz-results-container.micromag-screen-quiz-results-isPlaceholder{padding:10px}
5
5
  .micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-description,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-title{margin-bottom:10px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{margin:0 auto 10px;width:100%}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{height:60px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription{height:100px}.micromag-screen-quiz-title-container.micromag-screen-quiz-title-isPlaceholder{padding:10px}
package/es/index.js CHANGED
@@ -10,13 +10,14 @@ import { PropTypes } from '@micromag/core';
10
10
  import { ScreenElement, Transitions, Button as Button$1 } from '@micromag/core/components';
11
11
  import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
12
12
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
13
+ import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
13
14
  import { useQuizCreate } from '@micromag/data';
14
15
  import Background from '@micromag/element-background';
15
- import CallToAction from '@micromag/element-call-to-action';
16
16
  import Container from '@micromag/element-container';
17
+ import Footer from '@micromag/element-footer';
18
+ import Header from '@micromag/element-header';
17
19
  import Scroll from '@micromag/element-scroll';
18
20
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
19
- import { isTextFilled, getStyleFromColor } from '@micromag/core/utils';
20
21
  import Heading from '@micromag/element-heading';
21
22
  import Layout, { Spacer } from '@micromag/element-layout';
22
23
  import Text from '@micromag/element-text';
@@ -479,7 +480,7 @@ var Question = function Question(_ref) {
479
480
  Question.propTypes = propTypes$4;
480
481
  Question.defaultProps = defaultProps$4;
481
482
 
482
- var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
483
+ var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
483
484
 
484
485
  var propTypes$3 = {
485
486
  id: PropTypes$1.string,
@@ -497,7 +498,8 @@ var propTypes$3 = {
497
498
  withoutTrueFalse: PropTypes$1.bool,
498
499
  spacing: PropTypes$1.number,
499
500
  background: PropTypes.backgroundElement,
500
- callToAction: PropTypes.callToAction,
501
+ header: PropTypes.header,
502
+ footer: PropTypes.footer,
501
503
  current: PropTypes$1.bool,
502
504
  active: PropTypes$1.bool,
503
505
  ready: PropTypes$1.bool,
@@ -518,8 +520,9 @@ var defaultProps$3 = {
518
520
  badAnswerColor: null,
519
521
  withoutTrueFalse: false,
520
522
  spacing: 20,
523
+ header: null,
524
+ footer: null,
521
525
  background: null,
522
- callToAction: null,
523
526
  current: true,
524
527
  active: true,
525
528
  ready: true,
@@ -541,8 +544,9 @@ var QuizScreen = function QuizScreen(_ref) {
541
544
  badAnswerColor = _ref.badAnswerColor,
542
545
  withoutTrueFalse = _ref.withoutTrueFalse,
543
546
  spacing = _ref.spacing,
547
+ header = _ref.header,
548
+ footer = _ref.footer,
544
549
  background = _ref.background,
545
- callToAction = _ref.callToAction,
546
550
  current = _ref.current,
547
551
  active = _ref.active,
548
552
  ready = _ref.ready,
@@ -577,15 +581,22 @@ var QuizScreen = function QuizScreen(_ref) {
577
581
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
578
582
  var backgroundPlaying = current && (isView || isEdit);
579
583
  var mediaShouldLoad = current || active;
580
-
581
- // Call to Action
582
- var _ref2 = callToAction || {},
583
- _ref2$active = _ref2.active,
584
- hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
584
+ var hasHeader = isHeaderFilled(header);
585
+ var hasFooter = isFooterFilled(footer);
586
+ var footerProps = getFooterProps(footer, {
587
+ isView: isView,
588
+ current: current,
589
+ openWebView: openWebView,
590
+ isPreview: isPreview
591
+ });
585
592
  var _useDimensionObserver = useDimensionObserver(),
586
- callToActionRef = _useDimensionObserver.ref,
593
+ headerRef = _useDimensionObserver.ref,
587
594
  _useDimensionObserver2 = _useDimensionObserver.height,
588
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
595
+ headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
596
+ var _useDimensionObserver3 = useDimensionObserver(),
597
+ footerRef = _useDimensionObserver3.ref,
598
+ _useDimensionObserver4 = _useDimensionObserver3.height,
599
+ footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
589
600
  var showInstantAnswer = isStatic || isCapture;
590
601
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
591
602
  return answer !== null && answer.good;
@@ -616,14 +627,14 @@ var QuizScreen = function QuizScreen(_ref) {
616
627
  }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
617
628
  useEffect(function () {
618
629
  if (userAnswerIndex !== null) {
619
- var _ref3 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
620
- _ref3$good = _ref3.good,
621
- isGood = _ref3$good === void 0 ? false : _ref3$good,
622
- _ref3$label = _ref3.label,
623
- label = _ref3$label === void 0 ? {} : _ref3$label;
624
- var _ref4 = label || {},
625
- _ref4$body = _ref4.body,
626
- body = _ref4$body === void 0 ? '' : _ref4$body;
630
+ var _ref2 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
631
+ _ref2$good = _ref2.good,
632
+ isGood = _ref2$good === void 0 ? false : _ref2$good,
633
+ _ref2$label = _ref2.label,
634
+ label = _ref2$label === void 0 ? {} : _ref2$label;
635
+ var _ref3 = label || {},
636
+ _ref3$body = _ref3.body,
637
+ body = _ref3$body === void 0 ? '' : _ref3$body;
627
638
  submitQuiz({
628
639
  choice: body || userAnswerIndex,
629
640
  value: isGood ? 1 : 0
@@ -635,8 +646,8 @@ var QuizScreen = function QuizScreen(_ref) {
635
646
  _useState4 = _slicedToArray(_useState3, 2),
636
647
  scrolledBottom = _useState4[0],
637
648
  setScrolledBottom = _useState4[1];
638
- var onScrolledBottom = useCallback(function (_ref5) {
639
- var initial = _ref5.initial;
649
+ var onScrolledBottom = useCallback(function (_ref4) {
650
+ var initial = _ref4.initial;
640
651
  if (initial) {
641
652
  trackScreenEvent('scroll', 'Screen');
642
653
  }
@@ -645,6 +656,15 @@ var QuizScreen = function QuizScreen(_ref) {
645
656
  var onScrolledNotBottom = useCallback(function () {
646
657
  setScrolledBottom(false);
647
658
  }, [setScrolledBottom]);
659
+ var _useState5 = useState(false),
660
+ _useState6 = _slicedToArray(_useState5, 2),
661
+ hasScroll = _useState6[0],
662
+ setHasScroll = _useState6[1];
663
+ var onScrollHeightChange = useCallback(function (_ref5) {
664
+ var _ref5$canScroll = _ref5.canScroll,
665
+ canScroll = _ref5$canScroll === void 0 ? false : _ref5$canScroll;
666
+ setHasScroll(canScroll);
667
+ }, [setHasScroll]);
648
668
  var onQuizReset = useCallback(function () {
649
669
  setUserAnswerIndex(null);
650
670
  }, [setUserAnswerIndex]);
@@ -667,10 +687,21 @@ var QuizScreen = function QuizScreen(_ref) {
667
687
  onClick: onQuizReset
668
688
  }) : null, /*#__PURE__*/React.createElement(Scroll, {
669
689
  verticalAlign: verticalAlign,
670
- disabled: scrollingDisabled,
690
+ disabled: scrollingDisabled || userAnswerIndex !== null,
671
691
  onScrolledBottom: onScrolledBottom,
672
- onScrolledNotBottom: onScrolledNotBottom
673
- }, /*#__PURE__*/React.createElement(Question, {
692
+ onScrolledNotBottom: onScrolledNotBottom,
693
+ onScrollHeightChange: onScrollHeightChange
694
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
695
+ className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
696
+ ref: headerRef,
697
+ style: {
698
+ paddingTop: spacing,
699
+ paddingLeft: spacing,
700
+ paddingRight: spacing,
701
+ paddingBottom: spacing,
702
+ transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
703
+ }
704
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Question, {
674
705
  question: question,
675
706
  answers: answers,
676
707
  result: result,
@@ -693,12 +724,12 @@ var QuizScreen = function QuizScreen(_ref) {
693
724
  className: styles$2.question,
694
725
  style: !isPlaceholder ? {
695
726
  padding: spacing,
696
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
697
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
727
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
728
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
698
729
  } : null
699
- })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
700
- ref: callToActionRef,
701
- className: classNames([styles$2.callToAction, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
730
+ })), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
731
+ ref: footerRef,
732
+ className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom && hasScroll)]),
702
733
  style: {
703
734
  transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
704
735
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
@@ -706,11 +737,7 @@ var QuizScreen = function QuizScreen(_ref) {
706
737
  paddingTop: spacing / 2,
707
738
  paddingBottom: spacing / 2
708
739
  }
709
- }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
710
- animationDisabled: isPreview,
711
- focusable: current && isView,
712
- openWebView: openWebView
713
- }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
740
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
714
741
  background: background,
715
742
  width: width,
716
743
  height: height,
@@ -977,7 +1004,8 @@ var propTypes = {
977
1004
  background: PropTypes.backgroundElement,
978
1005
  introButton: PropTypes.textElement,
979
1006
  introBackground: PropTypes.backgroundElement,
980
- callToAction: PropTypes.callToAction,
1007
+ header: PropTypes.header,
1008
+ footer: PropTypes.footer,
981
1009
  current: PropTypes$1.bool,
982
1010
  active: PropTypes$1.bool,
983
1011
  transitions: PropTypes.transitions,
@@ -1004,7 +1032,8 @@ var defaultProps = {
1004
1032
  background: null,
1005
1033
  introButton: null,
1006
1034
  introBackground: null,
1007
- callToAction: null,
1035
+ header: null,
1036
+ footer: null,
1008
1037
  current: true,
1009
1038
  active: true,
1010
1039
  transitions: null,
@@ -1013,7 +1042,7 @@ var defaultProps = {
1013
1042
  className: null
1014
1043
  };
1015
1044
  var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1016
- var _ref12;
1045
+ var _ref13;
1017
1046
  var id = _ref.id,
1018
1047
  layout = _ref.layout,
1019
1048
  introLayout = _ref.introLayout,
@@ -1032,7 +1061,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1032
1061
  background = _ref.background,
1033
1062
  introBackground = _ref.introBackground,
1034
1063
  introButton = _ref.introButton,
1035
- callToAction = _ref.callToAction,
1064
+ header = _ref.header,
1065
+ footer = _ref.footer,
1036
1066
  current = _ref.current,
1037
1067
  active = _ref.active,
1038
1068
  transitions = _ref.transitions,
@@ -1075,11 +1105,22 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1075
1105
 
1076
1106
  // Call to Action
1077
1107
 
1078
- var hasCallToAction = callToAction !== null && callToAction.active === true;
1108
+ var hasHeader = isHeaderFilled(header);
1109
+ var hasFooter = isFooterFilled(footer);
1110
+ var footerProps = getFooterProps(footer, {
1111
+ isView: isView,
1112
+ current: current,
1113
+ openWebView: openWebView,
1114
+ isPreview: isPreview
1115
+ });
1079
1116
  var _useDimensionObserver = useDimensionObserver(),
1080
- callToActionRef = _useDimensionObserver.ref,
1117
+ headerRef = _useDimensionObserver.ref,
1081
1118
  _useDimensionObserver2 = _useDimensionObserver.height,
1082
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1119
+ headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1120
+ var _useDimensionObserver3 = useDimensionObserver(),
1121
+ callToActionRef = _useDimensionObserver3.ref,
1122
+ _useDimensionObserver4 = _useDimensionObserver3.height,
1123
+ callToActionHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
1083
1124
  var showInstantAnswer = isStatic || isCapture;
1084
1125
  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
1085
1126
  var _useState = useState(null),
@@ -1256,6 +1297,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1256
1297
  var onScrolledNotBottom = useCallback(function () {
1257
1298
  setScrolledBottom(false);
1258
1299
  }, [setScrolledBottom]);
1300
+ var _useState7 = useState(false),
1301
+ _useState8 = _slicedToArray(_useState7, 2),
1302
+ hasScroll = _useState8[0],
1303
+ setHasScroll = _useState8[1];
1304
+ var onScrollHeightChange = useCallback(function (_ref12) {
1305
+ var _ref12$canScroll = _ref12.canScroll,
1306
+ canScroll = _ref12$canScroll === void 0 ? false : _ref12$canScroll;
1307
+ setHasScroll(canScroll);
1308
+ }, [setHasScroll]);
1259
1309
  var onQuizReset = useCallback(function () {
1260
1310
  setUserAnswers(null);
1261
1311
  }, [setUserAnswers]);
@@ -1270,7 +1320,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1270
1320
  var showPoints = isEdit;
1271
1321
  var showReset = isEdit;
1272
1322
  return /*#__PURE__*/React.createElement("div", {
1273
- className: classNames([styles$2.container, (_ref12 = {}, _defineProperty(_ref12, styles$2[direction], direction !== null), _defineProperty(_ref12, className, className !== null), _ref12)]),
1323
+ className: classNames([styles$2.container, (_ref13 = {}, _defineProperty(_ref13, styles$2[direction], direction !== null), _defineProperty(_ref13, className, className !== null), _ref13)]),
1274
1324
  "data-screen-ready": true
1275
1325
  }, /*#__PURE__*/React.createElement(Container, {
1276
1326
  width: width,
@@ -1291,11 +1341,22 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1291
1341
  size: "md"
1292
1342
  }),
1293
1343
  onClick: onQuizReset
1294
- }) : null, /*#__PURE__*/React.createElement(Scroll, {
1344
+ }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
1345
+ className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
1346
+ ref: headerRef,
1347
+ style: {
1348
+ paddingTop: spacing,
1349
+ paddingLeft: spacing,
1350
+ paddingRight: spacing,
1351
+ paddingBottom: spacing,
1352
+ transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
1353
+ }
1354
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Scroll, {
1295
1355
  verticalAlign: verticalAlign,
1296
1356
  disabled: scrollingDisabled,
1297
1357
  onScrolledBottom: onScrolledBottom,
1298
- onScrolledNotBottom: onScrolledNotBottom
1358
+ onScrolledNotBottom: onScrolledNotBottom,
1359
+ onScrollHeightChange: onScrollHeightChange
1299
1360
  }, /*#__PURE__*/React.createElement(TransitionGroup, null, [isIntro ? /*#__PURE__*/React.createElement(CSSTransition, {
1300
1361
  key: "intro",
1301
1362
  classNames: styles$2,
@@ -1313,7 +1374,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1313
1374
  transitionDisabled: transitionDisabled,
1314
1375
  className: styles$2.intro,
1315
1376
  style: !isPlaceholder ? {
1316
- padding: spacing,
1377
+ paddingLeft: spacing,
1378
+ paddingRight: spacing,
1317
1379
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1318
1380
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1319
1381
  } : null,
@@ -1347,7 +1409,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1347
1409
  className: styles$2.question,
1348
1410
  style: !isPlaceholder ? {
1349
1411
  padding: spacing,
1350
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1412
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
1351
1413
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1352
1414
  } : null
1353
1415
  })) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
@@ -1365,12 +1427,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1365
1427
  className: styles$2.results,
1366
1428
  style: !isPlaceholder ? {
1367
1429
  padding: spacing,
1368
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1430
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
1369
1431
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1370
1432
  } : null
1371
- }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
1433
+ }))) : null])), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
1372
1434
  ref: callToActionRef,
1373
- className: classNames([styles$2.callToAction, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
1435
+ className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
1374
1436
  style: {
1375
1437
  transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
1376
1438
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
@@ -1378,11 +1440,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1378
1440
  paddingTop: spacing / 2,
1379
1441
  paddingBottom: spacing / 2
1380
1442
  }
1381
- }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
1382
- animationDisabled: isPreview,
1383
- focusable: current && isView,
1384
- openWebView: openWebView
1385
- }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
1443
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
1386
1444
  key: backgroundKey,
1387
1445
  classNames: styles$2,
1388
1446
  timeout: 1000
@@ -1864,17 +1922,25 @@ var definition = [{
1864
1922
  }]
1865
1923
  })
1866
1924
  }, {
1867
- name: 'callToAction',
1868
- type: 'call-to-action',
1869
- theme: {
1870
- boxStyle: 'cta',
1871
- label: {
1872
- textStyle: 'cta'
1873
- }
1874
- }
1925
+ name: 'header',
1926
+ type: 'header',
1927
+ label: defineMessage({
1928
+ id: "rhuDxI",
1929
+ defaultMessage: [{
1930
+ "type": 0,
1931
+ "value": "Header"
1932
+ }]
1933
+ })
1875
1934
  }, {
1876
- name: 'shareIncentive',
1877
- type: 'share-incentive'
1935
+ name: 'footer',
1936
+ type: 'footer',
1937
+ label: defineMessage({
1938
+ id: "g4nybp",
1939
+ defaultMessage: [{
1940
+ "type": 0,
1941
+ "value": "Footer"
1942
+ }]
1943
+ })
1878
1944
  }]
1879
1945
  }];
1880
1946
 
package/lib/index.js CHANGED
@@ -14,13 +14,14 @@ var core = require('@micromag/core');
14
14
  var components = require('@micromag/core/components');
15
15
  var contexts = require('@micromag/core/contexts');
16
16
  var hooks = require('@micromag/core/hooks');
17
+ var utils = require('@micromag/core/utils');
17
18
  var data = require('@micromag/data');
18
19
  var Background = require('@micromag/element-background');
19
- var CallToAction = require('@micromag/element-call-to-action');
20
20
  var Container = require('@micromag/element-container');
21
+ var Footer = require('@micromag/element-footer');
22
+ var Header = require('@micromag/element-header');
21
23
  var Scroll = require('@micromag/element-scroll');
22
24
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
23
- var utils = require('@micromag/core/utils');
24
25
  var Heading = require('@micromag/element-heading');
25
26
  var Layout = require('@micromag/element-layout');
26
27
  var Text = require('@micromag/element-text');
@@ -39,8 +40,9 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
39
40
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
40
41
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
41
42
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
42
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
43
43
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
44
+ var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
45
+ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
44
46
  var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
45
47
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
46
48
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
@@ -501,7 +503,7 @@ var Question = function Question(_ref) {
501
503
  Question.propTypes = propTypes$4;
502
504
  Question.defaultProps = defaultProps$4;
503
505
 
504
- var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
506
+ var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
505
507
 
506
508
  var propTypes$3 = {
507
509
  id: PropTypes__default["default"].string,
@@ -519,7 +521,8 @@ var propTypes$3 = {
519
521
  withoutTrueFalse: PropTypes__default["default"].bool,
520
522
  spacing: PropTypes__default["default"].number,
521
523
  background: core.PropTypes.backgroundElement,
522
- callToAction: core.PropTypes.callToAction,
524
+ header: core.PropTypes.header,
525
+ footer: core.PropTypes.footer,
523
526
  current: PropTypes__default["default"].bool,
524
527
  active: PropTypes__default["default"].bool,
525
528
  ready: PropTypes__default["default"].bool,
@@ -540,8 +543,9 @@ var defaultProps$3 = {
540
543
  badAnswerColor: null,
541
544
  withoutTrueFalse: false,
542
545
  spacing: 20,
546
+ header: null,
547
+ footer: null,
543
548
  background: null,
544
- callToAction: null,
545
549
  current: true,
546
550
  active: true,
547
551
  ready: true,
@@ -563,8 +567,9 @@ var QuizScreen = function QuizScreen(_ref) {
563
567
  badAnswerColor = _ref.badAnswerColor,
564
568
  withoutTrueFalse = _ref.withoutTrueFalse,
565
569
  spacing = _ref.spacing,
570
+ header = _ref.header,
571
+ footer = _ref.footer,
566
572
  background = _ref.background,
567
- callToAction = _ref.callToAction,
568
573
  current = _ref.current,
569
574
  active = _ref.active,
570
575
  ready = _ref.ready,
@@ -599,15 +604,22 @@ var QuizScreen = function QuizScreen(_ref) {
599
604
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
600
605
  var backgroundPlaying = current && (isView || isEdit);
601
606
  var mediaShouldLoad = current || active;
602
-
603
- // Call to Action
604
- var _ref2 = callToAction || {},
605
- _ref2$active = _ref2.active,
606
- hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
607
+ var hasHeader = utils.isHeaderFilled(header);
608
+ var hasFooter = utils.isFooterFilled(footer);
609
+ var footerProps = utils.getFooterProps(footer, {
610
+ isView: isView,
611
+ current: current,
612
+ openWebView: openWebView,
613
+ isPreview: isPreview
614
+ });
607
615
  var _useDimensionObserver = hooks.useDimensionObserver(),
608
- callToActionRef = _useDimensionObserver.ref,
616
+ headerRef = _useDimensionObserver.ref,
609
617
  _useDimensionObserver2 = _useDimensionObserver.height,
610
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
618
+ headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
619
+ var _useDimensionObserver3 = hooks.useDimensionObserver(),
620
+ footerRef = _useDimensionObserver3.ref,
621
+ _useDimensionObserver4 = _useDimensionObserver3.height,
622
+ footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
611
623
  var showInstantAnswer = isStatic || isCapture;
612
624
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
613
625
  return answer !== null && answer.good;
@@ -638,14 +650,14 @@ var QuizScreen = function QuizScreen(_ref) {
638
650
  }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
639
651
  React.useEffect(function () {
640
652
  if (userAnswerIndex !== null) {
641
- var _ref3 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
642
- _ref3$good = _ref3.good,
643
- isGood = _ref3$good === void 0 ? false : _ref3$good,
644
- _ref3$label = _ref3.label,
645
- label = _ref3$label === void 0 ? {} : _ref3$label;
646
- var _ref4 = label || {},
647
- _ref4$body = _ref4.body,
648
- body = _ref4$body === void 0 ? '' : _ref4$body;
653
+ var _ref2 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
654
+ _ref2$good = _ref2.good,
655
+ isGood = _ref2$good === void 0 ? false : _ref2$good,
656
+ _ref2$label = _ref2.label,
657
+ label = _ref2$label === void 0 ? {} : _ref2$label;
658
+ var _ref3 = label || {},
659
+ _ref3$body = _ref3.body,
660
+ body = _ref3$body === void 0 ? '' : _ref3$body;
649
661
  submitQuiz({
650
662
  choice: body || userAnswerIndex,
651
663
  value: isGood ? 1 : 0
@@ -657,8 +669,8 @@ var QuizScreen = function QuizScreen(_ref) {
657
669
  _useState4 = _slicedToArray__default["default"](_useState3, 2),
658
670
  scrolledBottom = _useState4[0],
659
671
  setScrolledBottom = _useState4[1];
660
- var onScrolledBottom = React.useCallback(function (_ref5) {
661
- var initial = _ref5.initial;
672
+ var onScrolledBottom = React.useCallback(function (_ref4) {
673
+ var initial = _ref4.initial;
662
674
  if (initial) {
663
675
  trackScreenEvent('scroll', 'Screen');
664
676
  }
@@ -667,6 +679,15 @@ var QuizScreen = function QuizScreen(_ref) {
667
679
  var onScrolledNotBottom = React.useCallback(function () {
668
680
  setScrolledBottom(false);
669
681
  }, [setScrolledBottom]);
682
+ var _useState5 = React.useState(false),
683
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
684
+ hasScroll = _useState6[0],
685
+ setHasScroll = _useState6[1];
686
+ var onScrollHeightChange = React.useCallback(function (_ref5) {
687
+ var _ref5$canScroll = _ref5.canScroll,
688
+ canScroll = _ref5$canScroll === void 0 ? false : _ref5$canScroll;
689
+ setHasScroll(canScroll);
690
+ }, [setHasScroll]);
670
691
  var onQuizReset = React.useCallback(function () {
671
692
  setUserAnswerIndex(null);
672
693
  }, [setUserAnswerIndex]);
@@ -689,10 +710,21 @@ var QuizScreen = function QuizScreen(_ref) {
689
710
  onClick: onQuizReset
690
711
  }) : null, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
691
712
  verticalAlign: verticalAlign,
692
- disabled: scrollingDisabled,
713
+ disabled: scrollingDisabled || userAnswerIndex !== null,
693
714
  onScrolledBottom: onScrolledBottom,
694
- onScrolledNotBottom: onScrolledNotBottom
695
- }, /*#__PURE__*/React__default["default"].createElement(Question, {
715
+ onScrolledNotBottom: onScrolledNotBottom,
716
+ onScrollHeightChange: onScrollHeightChange
717
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
718
+ className: classNames__default["default"]([styles$2.header, _defineProperty__default["default"]({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
719
+ ref: headerRef,
720
+ style: {
721
+ paddingTop: spacing,
722
+ paddingLeft: spacing,
723
+ paddingRight: spacing,
724
+ paddingBottom: spacing,
725
+ transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
726
+ }
727
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Question, {
696
728
  question: question,
697
729
  answers: answers,
698
730
  result: result,
@@ -715,12 +747,12 @@ var QuizScreen = function QuizScreen(_ref) {
715
747
  className: styles$2.question,
716
748
  style: !isPlaceholder ? {
717
749
  padding: spacing,
718
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
719
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
750
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
751
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
720
752
  } : null
721
- })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
722
- ref: callToActionRef,
723
- className: classNames__default["default"]([styles$2.callToAction, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom)]),
753
+ })), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
754
+ ref: footerRef,
755
+ className: classNames__default["default"]([styles$2.footer, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom && hasScroll)]),
724
756
  style: {
725
757
  transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
726
758
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
@@ -728,11 +760,7 @@ var QuizScreen = function QuizScreen(_ref) {
728
760
  paddingTop: spacing / 2,
729
761
  paddingBottom: spacing / 2
730
762
  }
731
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
732
- animationDisabled: isPreview,
733
- focusable: current && isView,
734
- openWebView: openWebView
735
- }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
763
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
736
764
  background: background,
737
765
  width: width,
738
766
  height: height,
@@ -999,7 +1027,8 @@ var propTypes = {
999
1027
  background: core.PropTypes.backgroundElement,
1000
1028
  introButton: core.PropTypes.textElement,
1001
1029
  introBackground: core.PropTypes.backgroundElement,
1002
- callToAction: core.PropTypes.callToAction,
1030
+ header: core.PropTypes.header,
1031
+ footer: core.PropTypes.footer,
1003
1032
  current: PropTypes__default["default"].bool,
1004
1033
  active: PropTypes__default["default"].bool,
1005
1034
  transitions: core.PropTypes.transitions,
@@ -1026,7 +1055,8 @@ var defaultProps = {
1026
1055
  background: null,
1027
1056
  introButton: null,
1028
1057
  introBackground: null,
1029
- callToAction: null,
1058
+ header: null,
1059
+ footer: null,
1030
1060
  current: true,
1031
1061
  active: true,
1032
1062
  transitions: null,
@@ -1035,7 +1065,7 @@ var defaultProps = {
1035
1065
  className: null
1036
1066
  };
1037
1067
  var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1038
- var _ref12;
1068
+ var _ref13;
1039
1069
  var id = _ref.id,
1040
1070
  layout = _ref.layout,
1041
1071
  introLayout = _ref.introLayout,
@@ -1054,7 +1084,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1054
1084
  background = _ref.background,
1055
1085
  introBackground = _ref.introBackground,
1056
1086
  introButton = _ref.introButton,
1057
- callToAction = _ref.callToAction,
1087
+ header = _ref.header,
1088
+ footer = _ref.footer,
1058
1089
  current = _ref.current,
1059
1090
  active = _ref.active,
1060
1091
  transitions = _ref.transitions,
@@ -1097,11 +1128,22 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1097
1128
 
1098
1129
  // Call to Action
1099
1130
 
1100
- var hasCallToAction = callToAction !== null && callToAction.active === true;
1131
+ var hasHeader = utils.isHeaderFilled(header);
1132
+ var hasFooter = utils.isFooterFilled(footer);
1133
+ var footerProps = utils.getFooterProps(footer, {
1134
+ isView: isView,
1135
+ current: current,
1136
+ openWebView: openWebView,
1137
+ isPreview: isPreview
1138
+ });
1101
1139
  var _useDimensionObserver = hooks.useDimensionObserver(),
1102
- callToActionRef = _useDimensionObserver.ref,
1140
+ headerRef = _useDimensionObserver.ref,
1103
1141
  _useDimensionObserver2 = _useDimensionObserver.height,
1104
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1142
+ headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1143
+ var _useDimensionObserver3 = hooks.useDimensionObserver(),
1144
+ callToActionRef = _useDimensionObserver3.ref,
1145
+ _useDimensionObserver4 = _useDimensionObserver3.height,
1146
+ callToActionHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
1105
1147
  var showInstantAnswer = isStatic || isCapture;
1106
1148
  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
1107
1149
  var _useState = React.useState(null),
@@ -1278,6 +1320,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1278
1320
  var onScrolledNotBottom = React.useCallback(function () {
1279
1321
  setScrolledBottom(false);
1280
1322
  }, [setScrolledBottom]);
1323
+ var _useState7 = React.useState(false),
1324
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
1325
+ hasScroll = _useState8[0],
1326
+ setHasScroll = _useState8[1];
1327
+ var onScrollHeightChange = React.useCallback(function (_ref12) {
1328
+ var _ref12$canScroll = _ref12.canScroll,
1329
+ canScroll = _ref12$canScroll === void 0 ? false : _ref12$canScroll;
1330
+ setHasScroll(canScroll);
1331
+ }, [setHasScroll]);
1281
1332
  var onQuizReset = React.useCallback(function () {
1282
1333
  setUserAnswers(null);
1283
1334
  }, [setUserAnswers]);
@@ -1292,7 +1343,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1292
1343
  var showPoints = isEdit;
1293
1344
  var showReset = isEdit;
1294
1345
  return /*#__PURE__*/React__default["default"].createElement("div", {
1295
- className: classNames__default["default"]([styles$2.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, styles$2[direction], direction !== null), _defineProperty__default["default"](_ref12, className, className !== null), _ref12)]),
1346
+ className: classNames__default["default"]([styles$2.container, (_ref13 = {}, _defineProperty__default["default"](_ref13, styles$2[direction], direction !== null), _defineProperty__default["default"](_ref13, className, className !== null), _ref13)]),
1296
1347
  "data-screen-ready": true
1297
1348
  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
1298
1349
  width: width,
@@ -1313,11 +1364,22 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1313
1364
  size: "md"
1314
1365
  }),
1315
1366
  onClick: onQuizReset
1316
- }) : null, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
1367
+ }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
1368
+ className: classNames__default["default"]([styles$2.header, _defineProperty__default["default"]({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
1369
+ ref: headerRef,
1370
+ style: {
1371
+ paddingTop: spacing,
1372
+ paddingLeft: spacing,
1373
+ paddingRight: spacing,
1374
+ paddingBottom: spacing,
1375
+ transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
1376
+ }
1377
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
1317
1378
  verticalAlign: verticalAlign,
1318
1379
  disabled: scrollingDisabled,
1319
1380
  onScrolledBottom: onScrolledBottom,
1320
- onScrolledNotBottom: onScrolledNotBottom
1381
+ onScrolledNotBottom: onScrolledNotBottom,
1382
+ onScrollHeightChange: onScrollHeightChange
1321
1383
  }, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, [isIntro ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1322
1384
  key: "intro",
1323
1385
  classNames: styles$2,
@@ -1335,7 +1397,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1335
1397
  transitionDisabled: transitionDisabled,
1336
1398
  className: styles$2.intro,
1337
1399
  style: !isPlaceholder ? {
1338
- padding: spacing,
1400
+ paddingLeft: spacing,
1401
+ paddingRight: spacing,
1339
1402
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1340
1403
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1341
1404
  } : null,
@@ -1369,7 +1432,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1369
1432
  className: styles$2.question,
1370
1433
  style: !isPlaceholder ? {
1371
1434
  padding: spacing,
1372
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1435
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
1373
1436
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1374
1437
  } : null
1375
1438
  })) : null, isResults ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
@@ -1387,12 +1450,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1387
1450
  className: styles$2.results,
1388
1451
  style: !isPlaceholder ? {
1389
1452
  padding: spacing,
1390
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1453
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
1391
1454
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1392
1455
  } : null
1393
- }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
1456
+ }))) : null])), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
1394
1457
  ref: callToActionRef,
1395
- className: classNames__default["default"]([styles$2.callToAction, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom)]),
1458
+ className: classNames__default["default"]([styles$2.footer, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom)]),
1396
1459
  style: {
1397
1460
  transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
1398
1461
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
@@ -1400,11 +1463,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1400
1463
  paddingTop: spacing / 2,
1401
1464
  paddingBottom: spacing / 2
1402
1465
  }
1403
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
1404
- animationDisabled: isPreview,
1405
- focusable: current && isView,
1406
- openWebView: openWebView
1407
- }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1466
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1408
1467
  key: backgroundKey,
1409
1468
  classNames: styles$2,
1410
1469
  timeout: 1000
@@ -1886,17 +1945,25 @@ var definition = [{
1886
1945
  }]
1887
1946
  })
1888
1947
  }, {
1889
- name: 'callToAction',
1890
- type: 'call-to-action',
1891
- theme: {
1892
- boxStyle: 'cta',
1893
- label: {
1894
- textStyle: 'cta'
1895
- }
1896
- }
1948
+ name: 'header',
1949
+ type: 'header',
1950
+ label: reactIntl.defineMessage({
1951
+ id: "rhuDxI",
1952
+ defaultMessage: [{
1953
+ "type": 0,
1954
+ "value": "Header"
1955
+ }]
1956
+ })
1897
1957
  }, {
1898
- name: 'shareIncentive',
1899
- type: 'share-incentive'
1958
+ name: 'footer',
1959
+ type: 'footer',
1960
+ label: reactIntl.defineMessage({
1961
+ id: "g4nybp",
1962
+ defaultMessage: [{
1963
+ "type": 0,
1964
+ "value": "Footer"
1965
+ }]
1966
+ })
1900
1967
  }]
1901
1968
  }];
1902
1969
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.349",
3
+ "version": "0.3.356",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,17 +52,18 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.348",
56
- "@micromag/data": "^0.3.348",
57
- "@micromag/element-background": "^0.3.348",
58
- "@micromag/element-button": "^0.3.348",
59
- "@micromag/element-call-to-action": "^0.3.348",
60
- "@micromag/element-container": "^0.3.348",
61
- "@micromag/element-heading": "^0.3.348",
62
- "@micromag/element-layout": "^0.3.348",
63
- "@micromag/element-scroll": "^0.3.349",
64
- "@micromag/element-text": "^0.3.348",
65
- "@micromag/transforms": "^0.3.348",
55
+ "@micromag/core": "^0.3.354",
56
+ "@micromag/data": "^0.3.354",
57
+ "@micromag/element-background": "^0.3.354",
58
+ "@micromag/element-button": "^0.3.354",
59
+ "@micromag/element-container": "^0.3.354",
60
+ "@micromag/element-footer": "^0.3.354",
61
+ "@micromag/element-header": "^0.3.356",
62
+ "@micromag/element-heading": "^0.3.354",
63
+ "@micromag/element-layout": "^0.3.354",
64
+ "@micromag/element-scroll": "^0.3.354",
65
+ "@micromag/element-text": "^0.3.354",
66
+ "@micromag/transforms": "^0.3.354",
66
67
  "@react-spring/core": "^9.6.1",
67
68
  "@react-spring/web": "^9.6.1",
68
69
  "classnames": "^2.2.6",
@@ -75,5 +76,5 @@
75
76
  "publishConfig": {
76
77
  "access": "public"
77
78
  },
78
- "gitHead": "5e3c2c33b7e3c1833b1c43f97792b11d746864b1"
79
+ "gitHead": "683c410d9fc568658e5907fb0a8fa470cb04f6eb"
79
80
  }