@micromag/screen-quiz 0.3.78 → 0.3.81

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 +120 -11
  3. package/lib/index.js +121 -12
  4. package/package.json +12 -12
package/assets/css/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- .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}
1
+ .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;border-radius:10px;color:#fff}.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}
2
2
  .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}
3
3
  .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}
4
4
  .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 CHANGED
@@ -11,12 +11,12 @@ import { useQuizCreate } from '@micromag/data';
11
11
  import Background from '@micromag/element-background';
12
12
  import CallToAction from '@micromag/element-call-to-action';
13
13
  import Container from '@micromag/element-container';
14
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
14
15
  import { ScreenElement, Transitions } from '@micromag/core/components';
15
16
  import { isTextFilled, getStyleFromBox, getStyleFromColor } from '@micromag/core/utils';
16
17
  import Heading from '@micromag/element-heading';
17
18
  import Layout, { Spacer } from '@micromag/element-layout';
18
19
  import Text from '@micromag/element-text';
19
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
20
20
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
21
21
  import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
22
22
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -30,6 +30,7 @@ var propTypes$5 = {
30
30
  answeredIndex: PropTypes$1.number,
31
31
  answersCollapseDelay: PropTypes$1.number,
32
32
  buttonsStyle: PropTypes.boxStyle,
33
+ buttonsTextStyle: PropTypes.textStyle,
33
34
  goodAnswerColor: PropTypes.color,
34
35
  badAnswerColor: PropTypes.color,
35
36
  withoutGoodAnswer: PropTypes$1.bool,
@@ -49,6 +50,7 @@ var defaultProps$5 = {
49
50
  answeredIndex: null,
50
51
  answersCollapseDelay: 2000,
51
52
  buttonsStyle: null,
53
+ buttonsTextStyle: null,
52
54
  goodAnswerColor: null,
53
55
  badAnswerColor: null,
54
56
  withoutGoodAnswer: false,
@@ -72,6 +74,7 @@ var Answers = function Answers(_ref) {
72
74
  answeredIndex = _ref.answeredIndex,
73
75
  answersCollapseDelay = _ref.answersCollapseDelay,
74
76
  buttonsStyle = _ref.buttonsStyle,
77
+ buttonsTextStyle = _ref.buttonsTextStyle,
75
78
  goodAnswerColor = _ref.goodAnswerColor,
76
79
  badAnswerColor = _ref.badAnswerColor,
77
80
  withoutGoodAnswer = _ref.withoutGoodAnswer,
@@ -171,7 +174,7 @@ var Answers = function Answers(_ref) {
171
174
  }, items !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
172
175
  className: styles$4.items
173
176
  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items).map(function (answer, answerI) {
174
- var _ref7;
177
+ var _ref8;
175
178
 
176
179
  var userAnswer = answerI === answeredIndex;
177
180
 
@@ -183,6 +186,10 @@ var Answers = function Answers(_ref) {
183
186
  _ref6$buttonStyle = _ref6.buttonStyle,
184
187
  answerButtonStyle = _ref6$buttonStyle === void 0 ? null : _ref6$buttonStyle;
185
188
 
189
+ var _ref7 = label || {},
190
+ _ref7$textStyle = _ref7.textStyle,
191
+ textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
192
+
186
193
  var hasAnswer = isTextFilled(label);
187
194
 
188
195
  if (answersDidCollapsed && !rightAnswer) {
@@ -192,7 +199,7 @@ var Answers = function Answers(_ref) {
192
199
  return /*#__PURE__*/React.createElement("div", {
193
200
  key: "answer-".concat(answerI),
194
201
  ref: rightAnswer ? rightAnswerRef : null,
195
- className: classNames([styles$4.item, (_ref7 = {}, _defineProperty(_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref7, styles$4.userAnswer, userAnswer), _ref7)]),
202
+ className: classNames([styles$4.item, (_ref8 = {}, _defineProperty(_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref8, styles$4.userAnswer, userAnswer), _ref8)]),
196
203
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
197
204
  transform: "translateY(".concat(-rightAnswerTop, "px)")
198
205
  } : null,
@@ -239,7 +246,8 @@ var Answers = function Answers(_ref) {
239
246
  className: styles$4.faIcon,
240
247
  icon: faTimes
241
248
  })) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
242
- className: styles$4.optionLabel
249
+ className: styles$4.optionLabel,
250
+ textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), textStyle)
243
251
  })))) : null)));
244
252
  })) : null);
245
253
  };
@@ -260,6 +268,8 @@ var propTypes$4 = {
260
268
  totalCount: PropTypes$1.number,
261
269
  answeredIndex: PropTypes$1.number,
262
270
  buttonsStyle: PropTypes.boxStyle,
271
+ buttonsTextStyle: PropTypes.textStyle,
272
+ questionsHeadingStyle: PropTypes.textStyle,
263
273
  goodAnswerColor: PropTypes.color,
264
274
  badAnswerColor: PropTypes.color,
265
275
  focusable: PropTypes$1.bool,
@@ -286,6 +296,8 @@ var defaultProps$4 = {
286
296
  totalCount: null,
287
297
  answeredIndex: null,
288
298
  buttonsStyle: null,
299
+ buttonsTextStyle: null,
300
+ questionsHeadingStyle: null,
289
301
  goodAnswerColor: null,
290
302
  badAnswerColor: null,
291
303
  focusable: false,
@@ -306,7 +318,7 @@ var defaultProps$4 = {
306
318
  };
307
319
 
308
320
  var Question = function Question(_ref) {
309
- var _ref3;
321
+ var _ref4;
310
322
 
311
323
  var question = _ref.question,
312
324
  answers = _ref.answers,
@@ -315,6 +327,8 @@ var Question = function Question(_ref) {
315
327
  totalCount = _ref.totalCount,
316
328
  answeredIndex = _ref.answeredIndex,
317
329
  buttonsStyle = _ref.buttonsStyle,
330
+ buttonsTextStyle = _ref.buttonsTextStyle,
331
+ questionsHeadingStyle = _ref.questionsHeadingStyle,
318
332
  goodAnswerColor = _ref.goodAnswerColor,
319
333
  badAnswerColor = _ref.badAnswerColor,
320
334
  focusable = _ref.focusable,
@@ -339,6 +353,11 @@ var Question = function Question(_ref) {
339
353
  var isSplitted = layout === 'split';
340
354
  var verticalAlign = isSplitted ? null : layout;
341
355
  var hasQuestion = isTextFilled(question);
356
+
357
+ var _ref2 = question || {},
358
+ _ref2$textStyle = _ref2.textStyle,
359
+ questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
360
+
342
361
  var hasResult = isTextFilled(result);
343
362
 
344
363
  var _useState = useState(showInstantAnswer),
@@ -352,8 +371,8 @@ var Question = function Question(_ref) {
352
371
  resultRef = _useResizeObserver.ref,
353
372
  resultContentRect = _useResizeObserver.entry.contentRect;
354
373
 
355
- var _ref2 = resultContentRect || {};
356
- _ref2.height; // eslint-disable-line
374
+ var _ref3 = resultContentRect || {};
375
+ _ref3.height; // eslint-disable-line
357
376
 
358
377
 
359
378
  var onAnswersCollapse = useCallback(function () {
@@ -361,7 +380,7 @@ var Question = function Question(_ref) {
361
380
  }, [setResultVisible]);
362
381
  var hasIndex = index !== null && totalCount !== null;
363
382
  return /*#__PURE__*/React.createElement(Layout, {
364
- className: classNames([styles$3.container, (_ref3 = {}, _defineProperty(_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles$3.resultVisible, resultVisible), _defineProperty(_ref3, className, className !== null), _ref3)]),
383
+ className: classNames([styles$3.container, (_ref4 = {}, _defineProperty(_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref4, styles$3.resultVisible, resultVisible), _defineProperty(_ref4, className, className !== null), _ref4)]),
365
384
  fullscreen: true,
366
385
  verticalAlign: verticalAlign,
367
386
  style: style
@@ -393,7 +412,8 @@ var Question = function Question(_ref) {
393
412
  playing: transitionPlaying,
394
413
  disabled: transitionDisabled
395
414
  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
396
- className: styles$3.question
415
+ className: styles$3.question,
416
+ textStyle: _objectSpread(_objectSpread({}, questionsHeadingStyle), questionTextStyle)
397
417
  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
398
418
  key: "spacer"
399
419
  }) : null, /*#__PURE__*/React.createElement(Answers, {
@@ -404,6 +424,7 @@ var Question = function Question(_ref) {
404
424
  badAnswerColor: badAnswerColor,
405
425
  withoutGoodAnswer: withoutGoodAnswer,
406
426
  buttonsStyle: buttonsStyle,
427
+ buttonsTextStyle: buttonsTextStyle,
407
428
  focusable: focusable,
408
429
  transitions: transitions,
409
430
  transitionStagger: transitionStagger,
@@ -457,6 +478,7 @@ var propTypes$3 = {
457
478
  text: PropTypes.textElement
458
479
  }),
459
480
  buttonsStyle: PropTypes.boxStyle,
481
+ buttonsTextStyle: PropTypes.textStyle,
460
482
  goodAnswerColor: PropTypes.color,
461
483
  badAnswerColor: PropTypes.color,
462
484
  spacing: PropTypes$1.number,
@@ -476,6 +498,7 @@ var defaultProps$3 = {
476
498
  answers: null,
477
499
  result: null,
478
500
  buttonsStyle: null,
501
+ buttonsTextStyle: null,
479
502
  goodAnswerColor: null,
480
503
  badAnswerColor: null,
481
504
  spacing: 20,
@@ -496,6 +519,7 @@ var QuizScreen = function QuizScreen(_ref) {
496
519
  answers = _ref.answers,
497
520
  result = _ref.result,
498
521
  buttonsStyle = _ref.buttonsStyle,
522
+ buttonsTextStyle = _ref.buttonsTextStyle,
499
523
  goodAnswerColor = _ref.goodAnswerColor,
500
524
  badAnswerColor = _ref.badAnswerColor,
501
525
  spacing = _ref.spacing,
@@ -610,6 +634,7 @@ var QuizScreen = function QuizScreen(_ref) {
610
634
  result: result,
611
635
  answeredIndex: userAnswerIndex,
612
636
  buttonsStyle: buttonsStyle,
637
+ buttonsTextStyle: buttonsTextStyle,
613
638
  goodAnswerColor: goodAnswerColor,
614
639
  badAnswerColor: badAnswerColor,
615
640
  focusable: current && isView,
@@ -648,6 +673,8 @@ var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyDescr
648
673
  var propTypes$2 = {
649
674
  title: PropTypes.textElement,
650
675
  description: PropTypes.textElement,
676
+ resultsHeadingStyle: PropTypes.textStyle,
677
+ resultsTextStyle: PropTypes.textStyle,
651
678
  layout: PropTypes$1.string,
652
679
  transitions: PropTypes.transitions,
653
680
  transitionPlaying: PropTypes$1.bool,
@@ -659,6 +686,8 @@ var propTypes$2 = {
659
686
  var defaultProps$2 = {
660
687
  title: null,
661
688
  description: null,
689
+ resultsHeadingStyle: null,
690
+ resultsTextStyle: null,
662
691
  layout: null,
663
692
  transitions: null,
664
693
  transitionPlaying: false,
@@ -672,6 +701,8 @@ var Results = function Results(_ref) {
672
701
  var layout = _ref.layout,
673
702
  title = _ref.title,
674
703
  description = _ref.description,
704
+ resultsHeadingStyle = _ref.resultsHeadingStyle,
705
+ resultsTextStyle = _ref.resultsTextStyle,
675
706
  transitions = _ref.transitions,
676
707
  transitionPlaying = _ref.transitionPlaying,
677
708
  transitionStagger = _ref.transitionStagger,
@@ -681,7 +712,17 @@ var Results = function Results(_ref) {
681
712
  var isSplitted = layout === 'split';
682
713
  var verticalAlign = isSplitted ? null : layout;
683
714
  var hasTitle = isTextFilled(title);
715
+
716
+ var _ref2 = title || {},
717
+ _ref2$textStyle = _ref2.textStyle,
718
+ titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
719
+
684
720
  var hasDescription = isTextFilled(description);
721
+
722
+ var _ref3 = description || {},
723
+ _ref3$textStyle = _ref3.textStyle,
724
+ descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
725
+
685
726
  return /*#__PURE__*/React.createElement(Layout, {
686
727
  className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
687
728
  fullscreen: true,
@@ -704,7 +745,8 @@ var Results = function Results(_ref) {
704
745
  playing: transitionPlaying,
705
746
  disabled: transitionDisabled
706
747
  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
707
- className: styles$1.title
748
+ className: styles$1.title,
749
+ textStyle: _objectSpread(_objectSpread({}, resultsHeadingStyle), titleTextStyle)
708
750
  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
709
751
  key: "spacer"
710
752
  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -725,7 +767,8 @@ var Results = function Results(_ref) {
725
767
  disabled: transitionDisabled,
726
768
  delay: transitionStagger
727
769
  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
728
- className: styles$1.description
770
+ className: styles$1.description,
771
+ textStyle: _objectSpread(_objectSpread({}, resultsTextStyle), descriptionTextStyle)
729
772
  }))) : null)]);
730
773
  };
731
774
 
@@ -873,6 +916,10 @@ var propTypes = {
873
916
  description: PropTypes.textElement
874
917
  })),
875
918
  buttonsStyle: PropTypes.boxStyle,
919
+ buttonsTextStyle: PropTypes.textStyle,
920
+ questionsHeadingStyle: PropTypes.textStyle,
921
+ resultsHeadingStyle: PropTypes.textStyle,
922
+ resultsTextStyle: PropTypes.textStyle,
876
923
  goodAnswerColor: PropTypes.color,
877
924
  badAnswerColor: PropTypes.color,
878
925
  spacing: PropTypes$1.number,
@@ -896,6 +943,10 @@ var defaultProps = {
896
943
  questions: null,
897
944
  results: null,
898
945
  buttonsStyle: null,
946
+ buttonsTextStyle: null,
947
+ questionsHeadingStyle: null,
948
+ resultsHeadingStyle: null,
949
+ resultsTextStyle: null,
899
950
  goodAnswerColor: null,
900
951
  badAnswerColor: null,
901
952
  spacing: 20,
@@ -922,6 +973,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
922
973
  questions = _ref.questions,
923
974
  results = _ref.results,
924
975
  buttonsStyle = _ref.buttonsStyle,
976
+ buttonsTextStyle = _ref.buttonsTextStyle,
977
+ questionsHeadingStyle = _ref.questionsHeadingStyle,
978
+ resultsHeadingStyle = _ref.resultsHeadingStyle,
979
+ resultsTextStyle = _ref.resultsTextStyle,
925
980
  goodAnswerColor = _ref.goodAnswerColor,
926
981
  badAnswerColor = _ref.badAnswerColor,
927
982
  spacing = _ref.spacing,
@@ -1209,6 +1264,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1209
1264
  answers: answers,
1210
1265
  answeredIndex: currentAnsweredIndex,
1211
1266
  buttonsStyle: buttonsStyle,
1267
+ buttonsTextStyle: buttonsTextStyle,
1268
+ questionsHeadingStyle: questionsHeadingStyle,
1212
1269
  goodAnswerColor: goodAnswerColor,
1213
1270
  badAnswerColor: badAnswerColor,
1214
1271
  focusable: current && isView,
@@ -1232,6 +1289,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1232
1289
  classNames: styles$2,
1233
1290
  timeout: 2000
1234
1291
  }, /*#__PURE__*/React.createElement(Results, Object.assign({}, currentResult, {
1292
+ resultsHeadingStyle: resultsHeadingStyle,
1293
+ resultsTextStyle: resultsTextStyle,
1235
1294
  layout: resultLayout || layout,
1236
1295
  transitions: transitions,
1237
1296
  transitionPlaying: transitionPlaying,
@@ -1343,6 +1402,16 @@ var definition = [{
1343
1402
  }]
1344
1403
  }),
1345
1404
  fields: [{
1405
+ name: 'buttonsTextStyle',
1406
+ type: 'text-style-form',
1407
+ label: defineMessage({
1408
+ id: "gwPu/I",
1409
+ defaultMessage: [{
1410
+ "type": 0,
1411
+ "value": "Buttons text"
1412
+ }]
1413
+ })
1414
+ }, {
1346
1415
  name: 'buttonsStyle',
1347
1416
  type: 'box-style-form',
1348
1417
  label: defineMessage({
@@ -1629,6 +1698,16 @@ var definition = [{
1629
1698
  }),
1630
1699
  isList: true,
1631
1700
  fields: [{
1701
+ name: 'buttonsTextStyle',
1702
+ type: 'text-style-form',
1703
+ label: defineMessage({
1704
+ id: "gwPu/I",
1705
+ defaultMessage: [{
1706
+ "type": 0,
1707
+ "value": "Buttons text"
1708
+ }]
1709
+ })
1710
+ }, {
1632
1711
  name: 'buttonsStyle',
1633
1712
  type: 'box-style-form',
1634
1713
  label: defineMessage({
@@ -1638,6 +1717,36 @@ var definition = [{
1638
1717
  "value": "Buttons"
1639
1718
  }]
1640
1719
  })
1720
+ }, {
1721
+ name: 'questionsHeadingStyle',
1722
+ type: 'text-style-form',
1723
+ label: defineMessage({
1724
+ id: "+FHxPO",
1725
+ defaultMessage: [{
1726
+ "type": 0,
1727
+ "value": "Questions title"
1728
+ }]
1729
+ })
1730
+ }, {
1731
+ name: 'resultsHeadingStyle',
1732
+ type: 'text-style-form',
1733
+ label: defineMessage({
1734
+ id: "BnRW4y",
1735
+ defaultMessage: [{
1736
+ "type": 0,
1737
+ "value": "Results title"
1738
+ }]
1739
+ })
1740
+ }, {
1741
+ name: 'resultsTextStyle',
1742
+ type: 'text-style-form',
1743
+ label: defineMessage({
1744
+ id: "uDHTZn",
1745
+ defaultMessage: [{
1746
+ "type": 0,
1747
+ "value": "Results description"
1748
+ }]
1749
+ })
1641
1750
  }]
1642
1751
  }, {
1643
1752
  name: 'background',
package/lib/index.js CHANGED
@@ -15,12 +15,12 @@ var data = require('@micromag/data');
15
15
  var Background = require('@micromag/element-background');
16
16
  var CallToAction = require('@micromag/element-call-to-action');
17
17
  var Container = require('@micromag/element-container');
18
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
18
19
  var components = require('@micromag/core/components');
19
20
  var utils = require('@micromag/core/utils');
20
21
  var Heading = require('@micromag/element-heading');
21
22
  var Layout = require('@micromag/element-layout');
22
23
  var Text = require('@micromag/element-text');
23
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
24
24
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
25
25
  var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
26
26
  var reactFontawesome = require('@fortawesome/react-fontawesome');
@@ -37,10 +37,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
37
37
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
38
38
  var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
39
39
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
40
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
40
41
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
41
42
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
42
43
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
43
- var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
44
44
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
45
45
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
46
46
 
@@ -51,6 +51,7 @@ var propTypes$5 = {
51
51
  answeredIndex: PropTypes__default["default"].number,
52
52
  answersCollapseDelay: PropTypes__default["default"].number,
53
53
  buttonsStyle: core.PropTypes.boxStyle,
54
+ buttonsTextStyle: core.PropTypes.textStyle,
54
55
  goodAnswerColor: core.PropTypes.color,
55
56
  badAnswerColor: core.PropTypes.color,
56
57
  withoutGoodAnswer: PropTypes__default["default"].bool,
@@ -70,6 +71,7 @@ var defaultProps$5 = {
70
71
  answeredIndex: null,
71
72
  answersCollapseDelay: 2000,
72
73
  buttonsStyle: null,
74
+ buttonsTextStyle: null,
73
75
  goodAnswerColor: null,
74
76
  badAnswerColor: null,
75
77
  withoutGoodAnswer: false,
@@ -93,6 +95,7 @@ var Answers = function Answers(_ref) {
93
95
  answeredIndex = _ref.answeredIndex,
94
96
  answersCollapseDelay = _ref.answersCollapseDelay,
95
97
  buttonsStyle = _ref.buttonsStyle,
98
+ buttonsTextStyle = _ref.buttonsTextStyle,
96
99
  goodAnswerColor = _ref.goodAnswerColor,
97
100
  badAnswerColor = _ref.badAnswerColor,
98
101
  withoutGoodAnswer = _ref.withoutGoodAnswer,
@@ -192,7 +195,7 @@ var Answers = function Answers(_ref) {
192
195
  }, items !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
193
196
  className: styles$4.items
194
197
  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items).map(function (answer, answerI) {
195
- var _ref7;
198
+ var _ref8;
196
199
 
197
200
  var userAnswer = answerI === answeredIndex;
198
201
 
@@ -204,6 +207,10 @@ var Answers = function Answers(_ref) {
204
207
  _ref6$buttonStyle = _ref6.buttonStyle,
205
208
  answerButtonStyle = _ref6$buttonStyle === void 0 ? null : _ref6$buttonStyle;
206
209
 
210
+ var _ref7 = label || {},
211
+ _ref7$textStyle = _ref7.textStyle,
212
+ textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
213
+
207
214
  var hasAnswer = utils.isTextFilled(label);
208
215
 
209
216
  if (answersDidCollapsed && !rightAnswer) {
@@ -213,7 +220,7 @@ var Answers = function Answers(_ref) {
213
220
  return /*#__PURE__*/React__default["default"].createElement("div", {
214
221
  key: "answer-".concat(answerI),
215
222
  ref: rightAnswer ? rightAnswerRef : null,
216
- className: classNames__default["default"]([styles$4.item, (_ref7 = {}, _defineProperty__default["default"](_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref7, styles$4.userAnswer, userAnswer), _ref7)]),
223
+ className: classNames__default["default"]([styles$4.item, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref8, styles$4.userAnswer, userAnswer), _ref8)]),
217
224
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
218
225
  transform: "translateY(".concat(-rightAnswerTop, "px)")
219
226
  } : null,
@@ -260,7 +267,8 @@ var Answers = function Answers(_ref) {
260
267
  className: styles$4.faIcon,
261
268
  icon: freeSolidSvgIcons.faTimes
262
269
  })) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
263
- className: styles$4.optionLabel
270
+ className: styles$4.optionLabel,
271
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, buttonsTextStyle), textStyle)
264
272
  })))) : null)));
265
273
  })) : null);
266
274
  };
@@ -281,6 +289,8 @@ var propTypes$4 = {
281
289
  totalCount: PropTypes__default["default"].number,
282
290
  answeredIndex: PropTypes__default["default"].number,
283
291
  buttonsStyle: core.PropTypes.boxStyle,
292
+ buttonsTextStyle: core.PropTypes.textStyle,
293
+ questionsHeadingStyle: core.PropTypes.textStyle,
284
294
  goodAnswerColor: core.PropTypes.color,
285
295
  badAnswerColor: core.PropTypes.color,
286
296
  focusable: PropTypes__default["default"].bool,
@@ -307,6 +317,8 @@ var defaultProps$4 = {
307
317
  totalCount: null,
308
318
  answeredIndex: null,
309
319
  buttonsStyle: null,
320
+ buttonsTextStyle: null,
321
+ questionsHeadingStyle: null,
310
322
  goodAnswerColor: null,
311
323
  badAnswerColor: null,
312
324
  focusable: false,
@@ -327,7 +339,7 @@ var defaultProps$4 = {
327
339
  };
328
340
 
329
341
  var Question = function Question(_ref) {
330
- var _ref3;
342
+ var _ref4;
331
343
 
332
344
  var question = _ref.question,
333
345
  answers = _ref.answers,
@@ -336,6 +348,8 @@ var Question = function Question(_ref) {
336
348
  totalCount = _ref.totalCount,
337
349
  answeredIndex = _ref.answeredIndex,
338
350
  buttonsStyle = _ref.buttonsStyle,
351
+ buttonsTextStyle = _ref.buttonsTextStyle,
352
+ questionsHeadingStyle = _ref.questionsHeadingStyle,
339
353
  goodAnswerColor = _ref.goodAnswerColor,
340
354
  badAnswerColor = _ref.badAnswerColor,
341
355
  focusable = _ref.focusable,
@@ -360,6 +374,11 @@ var Question = function Question(_ref) {
360
374
  var isSplitted = layout === 'split';
361
375
  var verticalAlign = isSplitted ? null : layout;
362
376
  var hasQuestion = utils.isTextFilled(question);
377
+
378
+ var _ref2 = question || {},
379
+ _ref2$textStyle = _ref2.textStyle,
380
+ questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
381
+
363
382
  var hasResult = utils.isTextFilled(result);
364
383
 
365
384
  var _useState = React.useState(showInstantAnswer),
@@ -373,8 +392,8 @@ var Question = function Question(_ref) {
373
392
  resultRef = _useResizeObserver.ref,
374
393
  resultContentRect = _useResizeObserver.entry.contentRect;
375
394
 
376
- var _ref2 = resultContentRect || {};
377
- _ref2.height; // eslint-disable-line
395
+ var _ref3 = resultContentRect || {};
396
+ _ref3.height; // eslint-disable-line
378
397
 
379
398
 
380
399
  var onAnswersCollapse = React.useCallback(function () {
@@ -382,7 +401,7 @@ var Question = function Question(_ref) {
382
401
  }, [setResultVisible]);
383
402
  var hasIndex = index !== null && totalCount !== null;
384
403
  return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
385
- className: classNames__default["default"]([styles$3.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
404
+ className: classNames__default["default"]([styles$3.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref4, className, className !== null), _ref4)]),
386
405
  fullscreen: true,
387
406
  verticalAlign: verticalAlign,
388
407
  style: style
@@ -414,7 +433,8 @@ var Question = function Question(_ref) {
414
433
  playing: transitionPlaying,
415
434
  disabled: transitionDisabled
416
435
  }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, question, {
417
- className: styles$3.question
436
+ className: styles$3.question,
437
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, questionsHeadingStyle), questionTextStyle)
418
438
  }))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
419
439
  key: "spacer"
420
440
  }) : null, /*#__PURE__*/React__default["default"].createElement(Answers, {
@@ -425,6 +445,7 @@ var Question = function Question(_ref) {
425
445
  badAnswerColor: badAnswerColor,
426
446
  withoutGoodAnswer: withoutGoodAnswer,
427
447
  buttonsStyle: buttonsStyle,
448
+ buttonsTextStyle: buttonsTextStyle,
428
449
  focusable: focusable,
429
450
  transitions: transitions,
430
451
  transitionStagger: transitionStagger,
@@ -478,6 +499,7 @@ var propTypes$3 = {
478
499
  text: core.PropTypes.textElement
479
500
  }),
480
501
  buttonsStyle: core.PropTypes.boxStyle,
502
+ buttonsTextStyle: core.PropTypes.textStyle,
481
503
  goodAnswerColor: core.PropTypes.color,
482
504
  badAnswerColor: core.PropTypes.color,
483
505
  spacing: PropTypes__default["default"].number,
@@ -497,6 +519,7 @@ var defaultProps$3 = {
497
519
  answers: null,
498
520
  result: null,
499
521
  buttonsStyle: null,
522
+ buttonsTextStyle: null,
500
523
  goodAnswerColor: null,
501
524
  badAnswerColor: null,
502
525
  spacing: 20,
@@ -517,6 +540,7 @@ var QuizScreen = function QuizScreen(_ref) {
517
540
  answers = _ref.answers,
518
541
  result = _ref.result,
519
542
  buttonsStyle = _ref.buttonsStyle,
543
+ buttonsTextStyle = _ref.buttonsTextStyle,
520
544
  goodAnswerColor = _ref.goodAnswerColor,
521
545
  badAnswerColor = _ref.badAnswerColor,
522
546
  spacing = _ref.spacing,
@@ -631,6 +655,7 @@ var QuizScreen = function QuizScreen(_ref) {
631
655
  result: result,
632
656
  answeredIndex: userAnswerIndex,
633
657
  buttonsStyle: buttonsStyle,
658
+ buttonsTextStyle: buttonsTextStyle,
634
659
  goodAnswerColor: goodAnswerColor,
635
660
  badAnswerColor: badAnswerColor,
636
661
  focusable: current && isView,
@@ -669,6 +694,8 @@ var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyDescr
669
694
  var propTypes$2 = {
670
695
  title: core.PropTypes.textElement,
671
696
  description: core.PropTypes.textElement,
697
+ resultsHeadingStyle: core.PropTypes.textStyle,
698
+ resultsTextStyle: core.PropTypes.textStyle,
672
699
  layout: PropTypes__default["default"].string,
673
700
  transitions: core.PropTypes.transitions,
674
701
  transitionPlaying: PropTypes__default["default"].bool,
@@ -680,6 +707,8 @@ var propTypes$2 = {
680
707
  var defaultProps$2 = {
681
708
  title: null,
682
709
  description: null,
710
+ resultsHeadingStyle: null,
711
+ resultsTextStyle: null,
683
712
  layout: null,
684
713
  transitions: null,
685
714
  transitionPlaying: false,
@@ -693,6 +722,8 @@ var Results = function Results(_ref) {
693
722
  var layout = _ref.layout,
694
723
  title = _ref.title,
695
724
  description = _ref.description,
725
+ resultsHeadingStyle = _ref.resultsHeadingStyle,
726
+ resultsTextStyle = _ref.resultsTextStyle,
696
727
  transitions = _ref.transitions,
697
728
  transitionPlaying = _ref.transitionPlaying,
698
729
  transitionStagger = _ref.transitionStagger,
@@ -702,7 +733,17 @@ var Results = function Results(_ref) {
702
733
  var isSplitted = layout === 'split';
703
734
  var verticalAlign = isSplitted ? null : layout;
704
735
  var hasTitle = utils.isTextFilled(title);
736
+
737
+ var _ref2 = title || {},
738
+ _ref2$textStyle = _ref2.textStyle,
739
+ titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
740
+
705
741
  var hasDescription = utils.isTextFilled(description);
742
+
743
+ var _ref3 = description || {},
744
+ _ref3$textStyle = _ref3.textStyle,
745
+ descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
746
+
706
747
  return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
707
748
  className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)]),
708
749
  fullscreen: true,
@@ -725,7 +766,8 @@ var Results = function Results(_ref) {
725
766
  playing: transitionPlaying,
726
767
  disabled: transitionDisabled
727
768
  }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, title, {
728
- className: styles$1.title
769
+ className: styles$1.title,
770
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, resultsHeadingStyle), titleTextStyle)
729
771
  }))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
730
772
  key: "spacer"
731
773
  }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -746,7 +788,8 @@ var Results = function Results(_ref) {
746
788
  disabled: transitionDisabled,
747
789
  delay: transitionStagger
748
790
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
749
- className: styles$1.description
791
+ className: styles$1.description,
792
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, resultsTextStyle), descriptionTextStyle)
750
793
  }))) : null)]);
751
794
  };
752
795
 
@@ -894,6 +937,10 @@ var propTypes = {
894
937
  description: core.PropTypes.textElement
895
938
  })),
896
939
  buttonsStyle: core.PropTypes.boxStyle,
940
+ buttonsTextStyle: core.PropTypes.textStyle,
941
+ questionsHeadingStyle: core.PropTypes.textStyle,
942
+ resultsHeadingStyle: core.PropTypes.textStyle,
943
+ resultsTextStyle: core.PropTypes.textStyle,
897
944
  goodAnswerColor: core.PropTypes.color,
898
945
  badAnswerColor: core.PropTypes.color,
899
946
  spacing: PropTypes__default["default"].number,
@@ -917,6 +964,10 @@ var defaultProps = {
917
964
  questions: null,
918
965
  results: null,
919
966
  buttonsStyle: null,
967
+ buttonsTextStyle: null,
968
+ questionsHeadingStyle: null,
969
+ resultsHeadingStyle: null,
970
+ resultsTextStyle: null,
920
971
  goodAnswerColor: null,
921
972
  badAnswerColor: null,
922
973
  spacing: 20,
@@ -943,6 +994,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
943
994
  questions = _ref.questions,
944
995
  results = _ref.results,
945
996
  buttonsStyle = _ref.buttonsStyle,
997
+ buttonsTextStyle = _ref.buttonsTextStyle,
998
+ questionsHeadingStyle = _ref.questionsHeadingStyle,
999
+ resultsHeadingStyle = _ref.resultsHeadingStyle,
1000
+ resultsTextStyle = _ref.resultsTextStyle,
946
1001
  goodAnswerColor = _ref.goodAnswerColor,
947
1002
  badAnswerColor = _ref.badAnswerColor,
948
1003
  spacing = _ref.spacing,
@@ -1230,6 +1285,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1230
1285
  answers: answers,
1231
1286
  answeredIndex: currentAnsweredIndex,
1232
1287
  buttonsStyle: buttonsStyle,
1288
+ buttonsTextStyle: buttonsTextStyle,
1289
+ questionsHeadingStyle: questionsHeadingStyle,
1233
1290
  goodAnswerColor: goodAnswerColor,
1234
1291
  badAnswerColor: badAnswerColor,
1235
1292
  focusable: current && isView,
@@ -1253,6 +1310,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1253
1310
  classNames: styles$2,
1254
1311
  timeout: 2000
1255
1312
  }, /*#__PURE__*/React__default["default"].createElement(Results, Object.assign({}, currentResult, {
1313
+ resultsHeadingStyle: resultsHeadingStyle,
1314
+ resultsTextStyle: resultsTextStyle,
1256
1315
  layout: resultLayout || layout,
1257
1316
  transitions: transitions,
1258
1317
  transitionPlaying: transitionPlaying,
@@ -1364,6 +1423,16 @@ var definition = [{
1364
1423
  }]
1365
1424
  }),
1366
1425
  fields: [{
1426
+ name: 'buttonsTextStyle',
1427
+ type: 'text-style-form',
1428
+ label: reactIntl.defineMessage({
1429
+ id: "gwPu/I",
1430
+ defaultMessage: [{
1431
+ "type": 0,
1432
+ "value": "Buttons text"
1433
+ }]
1434
+ })
1435
+ }, {
1367
1436
  name: 'buttonsStyle',
1368
1437
  type: 'box-style-form',
1369
1438
  label: reactIntl.defineMessage({
@@ -1650,6 +1719,16 @@ var definition = [{
1650
1719
  }),
1651
1720
  isList: true,
1652
1721
  fields: [{
1722
+ name: 'buttonsTextStyle',
1723
+ type: 'text-style-form',
1724
+ label: reactIntl.defineMessage({
1725
+ id: "gwPu/I",
1726
+ defaultMessage: [{
1727
+ "type": 0,
1728
+ "value": "Buttons text"
1729
+ }]
1730
+ })
1731
+ }, {
1653
1732
  name: 'buttonsStyle',
1654
1733
  type: 'box-style-form',
1655
1734
  label: reactIntl.defineMessage({
@@ -1659,6 +1738,36 @@ var definition = [{
1659
1738
  "value": "Buttons"
1660
1739
  }]
1661
1740
  })
1741
+ }, {
1742
+ name: 'questionsHeadingStyle',
1743
+ type: 'text-style-form',
1744
+ label: reactIntl.defineMessage({
1745
+ id: "+FHxPO",
1746
+ defaultMessage: [{
1747
+ "type": 0,
1748
+ "value": "Questions title"
1749
+ }]
1750
+ })
1751
+ }, {
1752
+ name: 'resultsHeadingStyle',
1753
+ type: 'text-style-form',
1754
+ label: reactIntl.defineMessage({
1755
+ id: "BnRW4y",
1756
+ defaultMessage: [{
1757
+ "type": 0,
1758
+ "value": "Results title"
1759
+ }]
1760
+ })
1761
+ }, {
1762
+ name: 'resultsTextStyle',
1763
+ type: 'text-style-form',
1764
+ label: reactIntl.defineMessage({
1765
+ id: "uDHTZn",
1766
+ defaultMessage: [{
1767
+ "type": 0,
1768
+ "value": "Results description"
1769
+ }]
1770
+ })
1662
1771
  }]
1663
1772
  }, {
1664
1773
  name: 'background',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.78",
3
+ "version": "0.3.81",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,16 +52,16 @@
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.78",
56
- "@micromag/data": "^0.3.78",
57
- "@micromag/element-background": "^0.3.78",
58
- "@micromag/element-button": "^0.3.78",
59
- "@micromag/element-call-to-action": "^0.3.78",
60
- "@micromag/element-container": "^0.3.78",
61
- "@micromag/element-heading": "^0.3.78",
62
- "@micromag/element-layout": "^0.3.78",
63
- "@micromag/element-text": "^0.3.78",
64
- "@micromag/transforms": "^0.3.78",
55
+ "@micromag/core": "^0.3.81",
56
+ "@micromag/data": "^0.3.81",
57
+ "@micromag/element-background": "^0.3.81",
58
+ "@micromag/element-button": "^0.3.81",
59
+ "@micromag/element-call-to-action": "^0.3.81",
60
+ "@micromag/element-container": "^0.3.81",
61
+ "@micromag/element-heading": "^0.3.81",
62
+ "@micromag/element-layout": "^0.3.81",
63
+ "@micromag/element-text": "^0.3.81",
64
+ "@micromag/transforms": "^0.3.81",
65
65
  "classnames": "^2.2.6",
66
66
  "lodash": "^4.17.21",
67
67
  "prop-types": "^15.7.2",
@@ -72,5 +72,5 @@
72
72
  "publishConfig": {
73
73
  "access": "public"
74
74
  },
75
- "gitHead": "68be4e95203a5c15cefe58e423fe43eb374f3a7f"
75
+ "gitHead": "4fec1502a42a4813cc39e24de20c6cd47134cc62"
76
76
  }