@micromag/screen-quiz 0.3.7 → 0.3.11

package/assets/css/styles.css

@@ -1,5 +1,5 @@
 .micromag-screen-quiz-answers-emptyAnswer{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{width:100%;height:40px;margin:0 auto;font-size:.75em}.micromag-screen-quiz-answers-item{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item{opacity:.3}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer,.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:.99}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item,.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;opacity:0}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;opacity:1}.micromag-screen-quiz-answers-didCollapsed .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition:none;-o-transition:none;transition:none}.micromag-screen-quiz-answers-withoutGoodAnswer .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-button{position:relative;width:100%;padding:10px;color:#fff;border:1px solid #fff;border-radius:10px}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withGoodAnswer .micromag-screen-quiz-answers-button{padding-right:42px!important;padding-left:42px!important}.micromag-screen-quiz-answers-resultIcon{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:50%;left:5px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;margin-top:-16px;padding:5px;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;border:2px solid #1c1c1c;border-radius:50%;opacity:0;background-color:#ff2945}.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-itemContent{padding:5px 0}
 .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:5px auto;border:2px dashed #343434;color:#343434}.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;width:100%;margin-bottom:1em;text-align:center}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{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;opacity:0;pointer-events:none}.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{width:100%;margin:0 auto}.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{position:relative;opacity:1;pointer-events:all}.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);mix-blend-mode:difference;font-size:8px}
 .micromag-screen-quiz-container{position:relative;width:100%;height:100%;overflow:hidden}.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{position:relative;padding:6px}.micromag-screen-quiz-layout{top:0;right:0}.micromag-screen-quiz-callToAction,.micromag-screen-quiz-layout{position:absolute;bottom:0;left:0}.micromag-screen-quiz-callToAction{width:100%}.micromag-screen-quiz-transition{position:absolute;top:0;right:0;bottom:0;left: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{-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}.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{-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}.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{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:0}
-.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.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{width:100%;margin:0 auto}.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}
+.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.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{width:100%;margin:0 auto 10px}.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}
 .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.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{width:100%;margin:0 auto}.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}

package/es/index.js

@@ -162,7 +162,6 @@ var Answers = function Answers(_ref) {
       }
     }
   }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
-  console.log(items);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$4.container, (_ref5 = {}, _defineProperty(_ref5, styles$4.answered, answered), _defineProperty(_ref5, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty(_ref5, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty(_ref5, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref5, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref5, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref5, className, className !== null), _ref5)]),
     ref: answerRef,
@@ -638,45 +637,60 @@ var QuizScreen = function QuizScreen(_ref) {
 QuizScreen.propTypes = propTypes$3;
 QuizScreen.defaultProps = defaultProps$3;
 
-var styles$1 = {"container":"micromag-screen-quiz-title-container","emptyDescription":"micromag-screen-quiz-title-emptyDescription","emptyTitle":"micromag-screen-quiz-title-emptyTitle","title":"micromag-screen-quiz-title-title","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
+var styles$1 = {"container":"micromag-screen-quiz-title-container","emptyDescription":"micromag-screen-quiz-title-emptyDescription","emptyTitle":"micromag-screen-quiz-title-emptyTitle","description":"micromag-screen-quiz-title-description","title":"micromag-screen-quiz-title-title","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
 
 var propTypes$2 = {
   title: PropTypes.textElement,
   description: PropTypes.textElement,
+  button: PropTypes.textElement,
   layout: PropTypes$1.string,
+  focusable: PropTypes$1.bool,
   transitions: PropTypes.transitions,
   transitionPlaying: PropTypes$1.bool,
   transitionStagger: PropTypes$1.number,
   transitionDisabled: PropTypes$1.bool,
   className: PropTypes$1.string,
-  style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
+  style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number])),
+  onClickButton: PropTypes$1.func
 };
 var defaultProps$2 = {
   title: null,
   description: null,
   layout: null,
+  button: null,
+  focusable: false,
   transitions: null,
   transitionPlaying: false,
   transitionStagger: 100,
   transitionDisabled: false,
   className: null,
-  style: null
+  style: null,
+  onClickButton: null
 };
 
 var Title = function Title(_ref) {
   var layout = _ref.layout,
       title = _ref.title,
       description = _ref.description,
+      button = _ref.button,
+      focusable = _ref.focusable,
       transitions = _ref.transitions,
       transitionPlaying = _ref.transitionPlaying,
       transitionStagger = _ref.transitionStagger,
       transitionDisabled = _ref.transitionDisabled,
       className = _ref.className,
-      style = _ref.style;
+      style = _ref.style,
+      onClickButton = _ref.onClickButton;
+
+  var _useScreenRenderConte = useScreenRenderContext(),
+      isPreview = _useScreenRenderConte.isPreview,
+      isEdit = _useScreenRenderConte.isEdit;
+
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var hasTitle = isTextFilled(title);
   var hasDescription = isTextFilled(description);
+  var hasButton = isTextFilled(button);
   return /*#__PURE__*/React.createElement(Layout, {
     className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
     fullscreen: true,
@@ -700,9 +714,7 @@ var Title = function Title(_ref) {
     disabled: transitionDisabled
   }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
     className: styles$1.title
-  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
-    key: "spacer"
-  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+  }))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
     key: "description",
     placeholder: "text",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -714,14 +726,38 @@ var Title = function Title(_ref) {
     }),
     emptyClassName: styles$1.emptyDescription,
     isEmpty: !hasDescription
-  }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
+  }, hasDescription ? /*#__PURE__*/React.createElement(Transitions, {
     transitions: transitions,
     playing: transitionPlaying,
     disabled: transitionDisabled,
     delay: transitionStagger
   }, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
     className: styles$1.description
-  }))) : null)]);
+  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
+    key: "spacer"
+  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "button",
+    placeholder: "button"
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled,
+    delay: transitionStagger * 2
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: isPreview || isEdit,
+    focusable: focusable,
+    buttonStyle: button !== null ? button.buttonStyle : null,
+    className: styles$1.button,
+    onClick: onClickButton
+  }, hasButton ? /*#__PURE__*/React.createElement(Text, Object.assign({}, button, {
+    className: styles$1.label
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "D7LIZQ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Start"
+    }]
+  }))))]);
 };
 
 Title.propTypes = propTypes$2;
@@ -835,6 +871,7 @@ var propTypes = {
   badAnswerColor: PropTypes.color,
   spacing: PropTypes$1.number,
   background: PropTypes.backgroundElement,
+  introButton: PropTypes.textElement,
   introBackground: PropTypes.backgroundElement,
   callToAction: PropTypes.callToAction,
   current: PropTypes$1.bool,
@@ -857,6 +894,7 @@ var defaultProps = {
   badAnswerColor: null,
   spacing: 20,
   background: null,
+  introButton: null,
   introBackground: null,
   callToAction: null,
   current: true,
@@ -883,6 +921,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       spacing = _ref.spacing,
       background = _ref.background,
       introBackground = _ref.introBackground,
+      introButton = _ref.introButton,
       callToAction = _ref.callToAction,
       current = _ref.current,
       active = _ref.active,
@@ -978,6 +1017,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       setQuestionIndex('results');
     }
   }, [questions, questionIndex, setQuestionIndex]);
+  var onClickIntroButton = useCallback(function () {
+    setQuestionIndex(0);
+  }, [setQuestionIndex]);
   useEffect(function () {
     if (!current && isEdit && userAnswers !== null) {
       setUserAnswers(null);
@@ -1136,6 +1178,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     title: title,
     description: description,
     layout: introLayout || layout,
+    button: introButton,
+    focusable: current && isView,
     transitions: transitions,
     transitionPlaying: transitionPlaying,
     transitionStagger: transitionStagger,
@@ -1144,7 +1188,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
-    } : null
+    } : null,
+    onClickButton: onClickIntroButton
   })) : null, isQuestion ? /*#__PURE__*/React.createElement(CSSTransition, {
     key: "question-".concat(questionIndex),
     classNames: styles$2,
@@ -1287,24 +1332,14 @@ var definition = [{
     }),
     fields: [{
       name: 'buttonsStyle',
-      type: 'field-with-form',
+      type: 'box-style-form',
       label: defineMessage({
         id: "l5uLMd",
         defaultMessage: [{
           "type": 0,
           "value": "Buttons"
         }]
-      }),
-      noValueLabel: defineMessage({
-        id: "65rc70",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Edit style..."
-        }]
-      }),
-      field: {
-        type: 'box-style'
-      }
+      })
     }, {
       name: 'goodAnswerColor',
       type: 'color',
@@ -1414,6 +1449,19 @@ var definition = [{
           "value": "Description"
         }]
       })
+    }, {
+      name: 'introButton',
+      type: 'button-element',
+      theme: {
+        textStyle: 'button'
+      },
+      label: defineMessage({
+        id: "i6bmbD",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Button"
+        }]
+      })
     }, {
       name: 'introBackground',
       type: 'background',
@@ -1569,7 +1617,7 @@ var definition = [{
     isList: true,
     fields: [{
       name: 'buttonsStyle',
-      type: 'box-style',
+      type: 'box-style-form',
       label: defineMessage({
         id: "l5uLMd",
         defaultMessage: [{

package/lib/index.js

@@ -183,7 +183,6 @@ var Answers = function Answers(_ref) {
       }
     }
   }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
-  console.log(items);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$4.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$4.answered, answered), _defineProperty__default["default"](_ref5, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref5, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref5, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref5, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref5, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref5, className, className !== null), _ref5)]),
     ref: answerRef,
@@ -659,45 +658,60 @@ var QuizScreen = function QuizScreen(_ref) {
 QuizScreen.propTypes = propTypes$3;
 QuizScreen.defaultProps = defaultProps$3;
 
-var styles$1 = {"container":"micromag-screen-quiz-title-container","emptyDescription":"micromag-screen-quiz-title-emptyDescription","emptyTitle":"micromag-screen-quiz-title-emptyTitle","title":"micromag-screen-quiz-title-title","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
+var styles$1 = {"container":"micromag-screen-quiz-title-container","emptyDescription":"micromag-screen-quiz-title-emptyDescription","emptyTitle":"micromag-screen-quiz-title-emptyTitle","description":"micromag-screen-quiz-title-description","title":"micromag-screen-quiz-title-title","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
 
 var propTypes$2 = {
   title: core.PropTypes.textElement,
   description: core.PropTypes.textElement,
+  button: core.PropTypes.textElement,
   layout: PropTypes__default["default"].string,
+  focusable: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
   transitionPlaying: PropTypes__default["default"].bool,
   transitionStagger: PropTypes__default["default"].number,
   transitionDisabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
+  style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])),
+  onClickButton: PropTypes__default["default"].func
 };
 var defaultProps$2 = {
   title: null,
   description: null,
   layout: null,
+  button: null,
+  focusable: false,
   transitions: null,
   transitionPlaying: false,
   transitionStagger: 100,
   transitionDisabled: false,
   className: null,
-  style: null
+  style: null,
+  onClickButton: null
 };
 
 var Title = function Title(_ref) {
   var layout = _ref.layout,
       title = _ref.title,
       description = _ref.description,
+      button = _ref.button,
+      focusable = _ref.focusable,
       transitions = _ref.transitions,
       transitionPlaying = _ref.transitionPlaying,
       transitionStagger = _ref.transitionStagger,
       transitionDisabled = _ref.transitionDisabled,
       className = _ref.className,
-      style = _ref.style;
+      style = _ref.style,
+      onClickButton = _ref.onClickButton;
+
+  var _useScreenRenderConte = contexts.useScreenRenderContext(),
+      isPreview = _useScreenRenderConte.isPreview,
+      isEdit = _useScreenRenderConte.isEdit;
+
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var hasTitle = utils.isTextFilled(title);
   var hasDescription = utils.isTextFilled(description);
+  var hasButton = utils.isTextFilled(button);
   return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
     className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)]),
     fullscreen: true,
@@ -721,9 +735,7 @@ var Title = function Title(_ref) {
     disabled: transitionDisabled
   }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, title, {
     className: styles$1.title
-  }))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
-    key: "spacer"
-  }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  }))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "description",
     placeholder: "text",
     emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -735,14 +747,38 @@ var Title = function Title(_ref) {
     }),
     emptyClassName: styles$1.emptyDescription,
     isEmpty: !hasDescription
-  }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
+  }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
     transitions: transitions,
     playing: transitionPlaying,
     disabled: transitionDisabled,
     delay: transitionStagger
   }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
     className: styles$1.description
-  }))) : null)]);
+  }))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
+    key: "spacer"
+  }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+    key: "button",
+    placeholder: "button"
+  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled,
+    delay: transitionStagger * 2
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    disabled: isPreview || isEdit,
+    focusable: focusable,
+    buttonStyle: button !== null ? button.buttonStyle : null,
+    className: styles$1.button,
+    onClick: onClickButton
+  }, hasButton ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, button, {
+    className: styles$1.label
+  })) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "D7LIZQ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Start"
+    }]
+  }))))]);
 };
 
 Title.propTypes = propTypes$2;
@@ -856,6 +892,7 @@ var propTypes = {
   badAnswerColor: core.PropTypes.color,
   spacing: PropTypes__default["default"].number,
   background: core.PropTypes.backgroundElement,
+  introButton: core.PropTypes.textElement,
   introBackground: core.PropTypes.backgroundElement,
   callToAction: core.PropTypes.callToAction,
   current: PropTypes__default["default"].bool,
@@ -878,6 +915,7 @@ var defaultProps = {
   badAnswerColor: null,
   spacing: 20,
   background: null,
+  introButton: null,
   introBackground: null,
   callToAction: null,
   current: true,
@@ -904,6 +942,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       spacing = _ref.spacing,
       background = _ref.background,
       introBackground = _ref.introBackground,
+      introButton = _ref.introButton,
       callToAction = _ref.callToAction,
       current = _ref.current,
       active = _ref.active,
@@ -999,6 +1038,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       setQuestionIndex('results');
     }
   }, [questions, questionIndex, setQuestionIndex]);
+  var onClickIntroButton = React.useCallback(function () {
+    setQuestionIndex(0);
+  }, [setQuestionIndex]);
   React.useEffect(function () {
     if (!current && isEdit && userAnswers !== null) {
       setUserAnswers(null);
@@ -1157,6 +1199,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     title: title,
     description: description,
     layout: introLayout || layout,
+    button: introButton,
+    focusable: current && isView,
     transitions: transitions,
     transitionPlaying: transitionPlaying,
     transitionStagger: transitionStagger,
@@ -1165,7 +1209,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
-    } : null
+    } : null,
+    onClickButton: onClickIntroButton
   })) : null, isQuestion ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
     key: "question-".concat(questionIndex),
     classNames: styles$2,
@@ -1308,24 +1353,14 @@ var definition = [{
     }),
     fields: [{
       name: 'buttonsStyle',
-      type: 'field-with-form',
+      type: 'box-style-form',
       label: reactIntl.defineMessage({
         id: "l5uLMd",
         defaultMessage: [{
           "type": 0,
           "value": "Buttons"
         }]
-      }),
-      noValueLabel: reactIntl.defineMessage({
-        id: "65rc70",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Edit style..."
-        }]
-      }),
-      field: {
-        type: 'box-style'
-      }
+      })
     }, {
       name: 'goodAnswerColor',
       type: 'color',
@@ -1435,6 +1470,19 @@ var definition = [{
           "value": "Description"
         }]
       })
+    }, {
+      name: 'introButton',
+      type: 'button-element',
+      theme: {
+        textStyle: 'button'
+      },
+      label: reactIntl.defineMessage({
+        id: "i6bmbD",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Button"
+        }]
+      })
     }, {
       name: 'introBackground',
       type: 'background',
@@ -1590,7 +1638,7 @@ var definition = [{
     isList: true,
     fields: [{
       name: 'buttonsStyle',
-      type: 'box-style',
+      type: 'box-style-form',
       label: reactIntl.defineMessage({
         id: "l5uLMd",
         defaultMessage: [{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.7",
+    "version": "0.3.11",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,16 +52,16 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.7",
-        "@micromag/data": "^0.3.7",
-        "@micromag/element-background": "^0.3.7",
-        "@micromag/element-button": "^0.3.7",
-        "@micromag/element-call-to-action": "^0.3.7",
-        "@micromag/element-container": "^0.3.7",
-        "@micromag/element-heading": "^0.3.7",
-        "@micromag/element-layout": "^0.3.7",
-        "@micromag/element-text": "^0.3.7",
-        "@micromag/transforms": "^0.3.7",
+        "@micromag/core": "^0.3.11",
+        "@micromag/data": "^0.3.11",
+        "@micromag/element-background": "^0.3.11",
+        "@micromag/element-button": "^0.3.11",
+        "@micromag/element-call-to-action": "^0.3.11",
+        "@micromag/element-container": "^0.3.11",
+        "@micromag/element-heading": "^0.3.11",
+        "@micromag/element-layout": "^0.3.11",
+        "@micromag/element-text": "^0.3.11",
+        "@micromag/transforms": "^0.3.11",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -72,5 +72,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4acd8957237d0566a49a4ef5715cecfb263c1429"
+    "gitHead": "4baa4392185262ac19705bab9f21d4623a975249"
 }