@micromag/screen-quiz 0.3.45 → 0.3.48
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.
- package/assets/css/styles.css +2 -2
- package/es/index.js +71 -63
- package/lib/index.js +71 -63
- package/package.json +3 -3
package/assets/css/styles.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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}
|
|
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
|
-
.micromag-screen-quiz-
|
|
5
|
-
.micromag-screen-quiz-
|
|
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}
|
|
5
|
+
.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}
|
package/es/index.js
CHANGED
|
@@ -630,67 +630,56 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
630
630
|
className: styles$2.callToAction,
|
|
631
631
|
callToAction: callToAction,
|
|
632
632
|
animationDisabled: isPreview,
|
|
633
|
-
focusable: current && isView
|
|
633
|
+
focusable: current && isView,
|
|
634
|
+
screenSize: {
|
|
635
|
+
width: width,
|
|
636
|
+
height: height
|
|
637
|
+
}
|
|
634
638
|
}) : null));
|
|
635
639
|
};
|
|
636
640
|
|
|
637
641
|
QuizScreen.propTypes = propTypes$3;
|
|
638
642
|
QuizScreen.defaultProps = defaultProps$3;
|
|
639
643
|
|
|
640
|
-
var styles$1 = {"container":"micromag-screen-quiz-
|
|
644
|
+
var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyDescription":"micromag-screen-quiz-results-emptyDescription","emptyTitle":"micromag-screen-quiz-results-emptyTitle","title":"micromag-screen-quiz-results-title","isPlaceholder":"micromag-screen-quiz-results-isPlaceholder"};
|
|
641
645
|
|
|
642
646
|
var propTypes$2 = {
|
|
643
647
|
title: PropTypes.textElement,
|
|
644
648
|
description: PropTypes.textElement,
|
|
645
|
-
button: PropTypes.textElement,
|
|
646
649
|
layout: PropTypes$1.string,
|
|
647
|
-
focusable: PropTypes$1.bool,
|
|
648
650
|
transitions: PropTypes.transitions,
|
|
649
651
|
transitionPlaying: PropTypes$1.bool,
|
|
650
652
|
transitionStagger: PropTypes$1.number,
|
|
651
653
|
transitionDisabled: PropTypes$1.bool,
|
|
652
654
|
className: PropTypes$1.string,
|
|
653
|
-
style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
|
|
654
|
-
onClickButton: PropTypes$1.func
|
|
655
|
+
style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
|
|
655
656
|
};
|
|
656
657
|
var defaultProps$2 = {
|
|
657
658
|
title: null,
|
|
658
659
|
description: null,
|
|
659
660
|
layout: null,
|
|
660
|
-
button: null,
|
|
661
|
-
focusable: false,
|
|
662
661
|
transitions: null,
|
|
663
662
|
transitionPlaying: false,
|
|
664
663
|
transitionStagger: 100,
|
|
665
664
|
transitionDisabled: false,
|
|
666
665
|
className: null,
|
|
667
|
-
style: null
|
|
668
|
-
onClickButton: null
|
|
666
|
+
style: null
|
|
669
667
|
};
|
|
670
668
|
|
|
671
|
-
var
|
|
669
|
+
var Results = function Results(_ref) {
|
|
672
670
|
var layout = _ref.layout,
|
|
673
671
|
title = _ref.title,
|
|
674
672
|
description = _ref.description,
|
|
675
|
-
button = _ref.button,
|
|
676
|
-
focusable = _ref.focusable,
|
|
677
673
|
transitions = _ref.transitions,
|
|
678
674
|
transitionPlaying = _ref.transitionPlaying,
|
|
679
675
|
transitionStagger = _ref.transitionStagger,
|
|
680
676
|
transitionDisabled = _ref.transitionDisabled,
|
|
681
677
|
className = _ref.className,
|
|
682
|
-
style = _ref.style
|
|
683
|
-
onClickButton = _ref.onClickButton;
|
|
684
|
-
|
|
685
|
-
var _useScreenRenderConte = useScreenRenderContext(),
|
|
686
|
-
isPreview = _useScreenRenderConte.isPreview,
|
|
687
|
-
isEdit = _useScreenRenderConte.isEdit;
|
|
688
|
-
|
|
678
|
+
style = _ref.style;
|
|
689
679
|
var isSplitted = layout === 'split';
|
|
690
680
|
var verticalAlign = isSplitted ? null : layout;
|
|
691
681
|
var hasTitle = isTextFilled(title);
|
|
692
682
|
var hasDescription = isTextFilled(description);
|
|
693
|
-
var hasButton = isTextFilled(button);
|
|
694
683
|
return /*#__PURE__*/React.createElement(Layout, {
|
|
695
684
|
className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
|
|
696
685
|
fullscreen: true,
|
|
@@ -714,7 +703,9 @@ var Title = function Title(_ref) {
|
|
|
714
703
|
disabled: transitionDisabled
|
|
715
704
|
}, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
|
|
716
705
|
className: styles$1.title
|
|
717
|
-
}))) : null), /*#__PURE__*/React.createElement(
|
|
706
|
+
}))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
|
|
707
|
+
key: "spacer"
|
|
708
|
+
}) : null, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
718
709
|
key: "description",
|
|
719
710
|
placeholder: "text",
|
|
720
711
|
emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
@@ -726,82 +717,73 @@ var Title = function Title(_ref) {
|
|
|
726
717
|
}),
|
|
727
718
|
emptyClassName: styles$1.emptyDescription,
|
|
728
719
|
isEmpty: !hasDescription
|
|
729
|
-
},
|
|
720
|
+
}, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
|
|
730
721
|
transitions: transitions,
|
|
731
722
|
playing: transitionPlaying,
|
|
732
723
|
disabled: transitionDisabled,
|
|
733
724
|
delay: transitionStagger
|
|
734
725
|
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
|
|
735
726
|
className: styles$1.description
|
|
736
|
-
}))) : null)
|
|
737
|
-
key: "spacer"
|
|
738
|
-
}) : null, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
739
|
-
key: "button",
|
|
740
|
-
placeholder: "button"
|
|
741
|
-
}, /*#__PURE__*/React.createElement(Transitions, {
|
|
742
|
-
transitions: transitions,
|
|
743
|
-
playing: transitionPlaying,
|
|
744
|
-
disabled: transitionDisabled,
|
|
745
|
-
delay: transitionStagger * 2
|
|
746
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
747
|
-
disabled: isPreview || isEdit,
|
|
748
|
-
focusable: focusable,
|
|
749
|
-
buttonStyle: button !== null ? button.buttonStyle : null,
|
|
750
|
-
className: styles$1.button,
|
|
751
|
-
onClick: onClickButton
|
|
752
|
-
}, hasButton ? /*#__PURE__*/React.createElement(Text, Object.assign({}, button, {
|
|
753
|
-
className: styles$1.label
|
|
754
|
-
})) : /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
755
|
-
id: "D7LIZQ",
|
|
756
|
-
defaultMessage: [{
|
|
757
|
-
"type": 0,
|
|
758
|
-
"value": "Start"
|
|
759
|
-
}]
|
|
760
|
-
}))))]);
|
|
727
|
+
}))) : null)]);
|
|
761
728
|
};
|
|
762
729
|
|
|
763
|
-
|
|
764
|
-
|
|
730
|
+
Results.propTypes = propTypes$2;
|
|
731
|
+
Results.defaultProps = defaultProps$2;
|
|
765
732
|
|
|
766
|
-
var styles = {"container":"micromag-screen-quiz-
|
|
733
|
+
var styles = {"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"};
|
|
767
734
|
|
|
768
735
|
var propTypes$1 = {
|
|
769
736
|
title: PropTypes.textElement,
|
|
770
737
|
description: PropTypes.textElement,
|
|
738
|
+
button: PropTypes.textElement,
|
|
771
739
|
layout: PropTypes$1.string,
|
|
740
|
+
focusable: PropTypes$1.bool,
|
|
772
741
|
transitions: PropTypes.transitions,
|
|
773
742
|
transitionPlaying: PropTypes$1.bool,
|
|
774
743
|
transitionStagger: PropTypes$1.number,
|
|
775
744
|
transitionDisabled: PropTypes$1.bool,
|
|
776
745
|
className: PropTypes$1.string,
|
|
777
|
-
style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
|
|
746
|
+
style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number])),
|
|
747
|
+
onClickButton: PropTypes$1.func
|
|
778
748
|
};
|
|
779
749
|
var defaultProps$1 = {
|
|
780
750
|
title: null,
|
|
781
751
|
description: null,
|
|
782
752
|
layout: null,
|
|
753
|
+
button: null,
|
|
754
|
+
focusable: false,
|
|
783
755
|
transitions: null,
|
|
784
756
|
transitionPlaying: false,
|
|
785
757
|
transitionStagger: 100,
|
|
786
758
|
transitionDisabled: false,
|
|
787
759
|
className: null,
|
|
788
|
-
style: null
|
|
760
|
+
style: null,
|
|
761
|
+
onClickButton: null
|
|
789
762
|
};
|
|
790
763
|
|
|
791
|
-
var
|
|
764
|
+
var Title = function Title(_ref) {
|
|
792
765
|
var layout = _ref.layout,
|
|
793
766
|
title = _ref.title,
|
|
794
767
|
description = _ref.description,
|
|
768
|
+
button = _ref.button,
|
|
769
|
+
focusable = _ref.focusable,
|
|
795
770
|
transitions = _ref.transitions,
|
|
796
771
|
transitionPlaying = _ref.transitionPlaying,
|
|
797
772
|
transitionStagger = _ref.transitionStagger,
|
|
798
773
|
transitionDisabled = _ref.transitionDisabled,
|
|
799
774
|
className = _ref.className,
|
|
800
|
-
style = _ref.style
|
|
775
|
+
style = _ref.style,
|
|
776
|
+
onClickButton = _ref.onClickButton;
|
|
777
|
+
|
|
778
|
+
var _useScreenRenderConte = useScreenRenderContext(),
|
|
779
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
780
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
781
|
+
|
|
801
782
|
var isSplitted = layout === 'split';
|
|
802
783
|
var verticalAlign = isSplitted ? null : layout;
|
|
803
784
|
var hasTitle = isTextFilled(title);
|
|
804
785
|
var hasDescription = isTextFilled(description);
|
|
786
|
+
var hasButton = isTextFilled(button);
|
|
805
787
|
return /*#__PURE__*/React.createElement(Layout, {
|
|
806
788
|
className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
|
|
807
789
|
fullscreen: true,
|
|
@@ -825,9 +807,7 @@ var Results = function Results(_ref) {
|
|
|
825
807
|
disabled: transitionDisabled
|
|
826
808
|
}, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
|
|
827
809
|
className: styles.title
|
|
828
|
-
}))) : null),
|
|
829
|
-
key: "spacer"
|
|
830
|
-
}) : null, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
810
|
+
}))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
|
|
831
811
|
key: "description",
|
|
832
812
|
placeholder: "text",
|
|
833
813
|
emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
@@ -839,18 +819,42 @@ var Results = function Results(_ref) {
|
|
|
839
819
|
}),
|
|
840
820
|
emptyClassName: styles.emptyDescription,
|
|
841
821
|
isEmpty: !hasDescription
|
|
842
|
-
},
|
|
822
|
+
}, hasDescription ? /*#__PURE__*/React.createElement(Transitions, {
|
|
843
823
|
transitions: transitions,
|
|
844
824
|
playing: transitionPlaying,
|
|
845
825
|
disabled: transitionDisabled,
|
|
846
826
|
delay: transitionStagger
|
|
847
827
|
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
|
|
848
828
|
className: styles.description
|
|
849
|
-
}))) : null)
|
|
829
|
+
}))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
|
|
830
|
+
key: "spacer"
|
|
831
|
+
}) : null, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
832
|
+
key: "button",
|
|
833
|
+
placeholder: "button"
|
|
834
|
+
}, /*#__PURE__*/React.createElement(Transitions, {
|
|
835
|
+
transitions: transitions,
|
|
836
|
+
playing: transitionPlaying,
|
|
837
|
+
disabled: transitionDisabled,
|
|
838
|
+
delay: transitionStagger * 2
|
|
839
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
840
|
+
disabled: isPreview || isEdit,
|
|
841
|
+
focusable: focusable,
|
|
842
|
+
buttonStyle: button !== null ? button.buttonStyle : null,
|
|
843
|
+
className: styles.button,
|
|
844
|
+
onClick: onClickButton
|
|
845
|
+
}, hasButton ? /*#__PURE__*/React.createElement(Text, Object.assign({}, button, {
|
|
846
|
+
className: styles.label
|
|
847
|
+
})) : /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
848
|
+
id: "D7LIZQ",
|
|
849
|
+
defaultMessage: [{
|
|
850
|
+
"type": 0,
|
|
851
|
+
"value": "Start"
|
|
852
|
+
}]
|
|
853
|
+
}))))]);
|
|
850
854
|
};
|
|
851
855
|
|
|
852
|
-
|
|
853
|
-
|
|
856
|
+
Title.propTypes = propTypes$1;
|
|
857
|
+
Title.defaultProps = defaultProps$1;
|
|
854
858
|
|
|
855
859
|
var propTypes = {
|
|
856
860
|
id: PropTypes$1.string,
|
|
@@ -1239,7 +1243,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1239
1243
|
className: styles$2.callToAction,
|
|
1240
1244
|
callToAction: callToAction,
|
|
1241
1245
|
animationDisabled: isPreview,
|
|
1242
|
-
focusable: current && isView
|
|
1246
|
+
focusable: current && isView,
|
|
1247
|
+
screenSize: {
|
|
1248
|
+
width: width,
|
|
1249
|
+
height: height
|
|
1250
|
+
}
|
|
1243
1251
|
}) : null));
|
|
1244
1252
|
};
|
|
1245
1253
|
|
package/lib/index.js
CHANGED
|
@@ -651,67 +651,56 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
651
651
|
className: styles$2.callToAction,
|
|
652
652
|
callToAction: callToAction,
|
|
653
653
|
animationDisabled: isPreview,
|
|
654
|
-
focusable: current && isView
|
|
654
|
+
focusable: current && isView,
|
|
655
|
+
screenSize: {
|
|
656
|
+
width: width,
|
|
657
|
+
height: height
|
|
658
|
+
}
|
|
655
659
|
}) : null));
|
|
656
660
|
};
|
|
657
661
|
|
|
658
662
|
QuizScreen.propTypes = propTypes$3;
|
|
659
663
|
QuizScreen.defaultProps = defaultProps$3;
|
|
660
664
|
|
|
661
|
-
var styles$1 = {"container":"micromag-screen-quiz-
|
|
665
|
+
var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyDescription":"micromag-screen-quiz-results-emptyDescription","emptyTitle":"micromag-screen-quiz-results-emptyTitle","title":"micromag-screen-quiz-results-title","isPlaceholder":"micromag-screen-quiz-results-isPlaceholder"};
|
|
662
666
|
|
|
663
667
|
var propTypes$2 = {
|
|
664
668
|
title: core.PropTypes.textElement,
|
|
665
669
|
description: core.PropTypes.textElement,
|
|
666
|
-
button: core.PropTypes.textElement,
|
|
667
670
|
layout: PropTypes__default["default"].string,
|
|
668
|
-
focusable: PropTypes__default["default"].bool,
|
|
669
671
|
transitions: core.PropTypes.transitions,
|
|
670
672
|
transitionPlaying: PropTypes__default["default"].bool,
|
|
671
673
|
transitionStagger: PropTypes__default["default"].number,
|
|
672
674
|
transitionDisabled: PropTypes__default["default"].bool,
|
|
673
675
|
className: PropTypes__default["default"].string,
|
|
674
|
-
style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
|
|
675
|
-
onClickButton: PropTypes__default["default"].func
|
|
676
|
+
style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
|
|
676
677
|
};
|
|
677
678
|
var defaultProps$2 = {
|
|
678
679
|
title: null,
|
|
679
680
|
description: null,
|
|
680
681
|
layout: null,
|
|
681
|
-
button: null,
|
|
682
|
-
focusable: false,
|
|
683
682
|
transitions: null,
|
|
684
683
|
transitionPlaying: false,
|
|
685
684
|
transitionStagger: 100,
|
|
686
685
|
transitionDisabled: false,
|
|
687
686
|
className: null,
|
|
688
|
-
style: null
|
|
689
|
-
onClickButton: null
|
|
687
|
+
style: null
|
|
690
688
|
};
|
|
691
689
|
|
|
692
|
-
var
|
|
690
|
+
var Results = function Results(_ref) {
|
|
693
691
|
var layout = _ref.layout,
|
|
694
692
|
title = _ref.title,
|
|
695
693
|
description = _ref.description,
|
|
696
|
-
button = _ref.button,
|
|
697
|
-
focusable = _ref.focusable,
|
|
698
694
|
transitions = _ref.transitions,
|
|
699
695
|
transitionPlaying = _ref.transitionPlaying,
|
|
700
696
|
transitionStagger = _ref.transitionStagger,
|
|
701
697
|
transitionDisabled = _ref.transitionDisabled,
|
|
702
698
|
className = _ref.className,
|
|
703
|
-
style = _ref.style
|
|
704
|
-
onClickButton = _ref.onClickButton;
|
|
705
|
-
|
|
706
|
-
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
707
|
-
isPreview = _useScreenRenderConte.isPreview,
|
|
708
|
-
isEdit = _useScreenRenderConte.isEdit;
|
|
709
|
-
|
|
699
|
+
style = _ref.style;
|
|
710
700
|
var isSplitted = layout === 'split';
|
|
711
701
|
var verticalAlign = isSplitted ? null : layout;
|
|
712
702
|
var hasTitle = utils.isTextFilled(title);
|
|
713
703
|
var hasDescription = utils.isTextFilled(description);
|
|
714
|
-
var hasButton = utils.isTextFilled(button);
|
|
715
704
|
return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
|
|
716
705
|
className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
717
706
|
fullscreen: true,
|
|
@@ -735,7 +724,9 @@ var Title = function Title(_ref) {
|
|
|
735
724
|
disabled: transitionDisabled
|
|
736
725
|
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, title, {
|
|
737
726
|
className: styles$1.title
|
|
738
|
-
}))) : null), /*#__PURE__*/React__default["default"].createElement(
|
|
727
|
+
}))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
728
|
+
key: "spacer"
|
|
729
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
739
730
|
key: "description",
|
|
740
731
|
placeholder: "text",
|
|
741
732
|
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
@@ -747,82 +738,73 @@ var Title = function Title(_ref) {
|
|
|
747
738
|
}),
|
|
748
739
|
emptyClassName: styles$1.emptyDescription,
|
|
749
740
|
isEmpty: !hasDescription
|
|
750
|
-
},
|
|
741
|
+
}, hasTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
751
742
|
transitions: transitions,
|
|
752
743
|
playing: transitionPlaying,
|
|
753
744
|
disabled: transitionDisabled,
|
|
754
745
|
delay: transitionStagger
|
|
755
746
|
}, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
|
|
756
747
|
className: styles$1.description
|
|
757
|
-
}))) : null)
|
|
758
|
-
key: "spacer"
|
|
759
|
-
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
760
|
-
key: "button",
|
|
761
|
-
placeholder: "button"
|
|
762
|
-
}, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
763
|
-
transitions: transitions,
|
|
764
|
-
playing: transitionPlaying,
|
|
765
|
-
disabled: transitionDisabled,
|
|
766
|
-
delay: transitionStagger * 2
|
|
767
|
-
}, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
768
|
-
disabled: isPreview || isEdit,
|
|
769
|
-
focusable: focusable,
|
|
770
|
-
buttonStyle: button !== null ? button.buttonStyle : null,
|
|
771
|
-
className: styles$1.button,
|
|
772
|
-
onClick: onClickButton
|
|
773
|
-
}, hasButton ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, button, {
|
|
774
|
-
className: styles$1.label
|
|
775
|
-
})) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
776
|
-
id: "D7LIZQ",
|
|
777
|
-
defaultMessage: [{
|
|
778
|
-
"type": 0,
|
|
779
|
-
"value": "Start"
|
|
780
|
-
}]
|
|
781
|
-
}))))]);
|
|
748
|
+
}))) : null)]);
|
|
782
749
|
};
|
|
783
750
|
|
|
784
|
-
|
|
785
|
-
|
|
751
|
+
Results.propTypes = propTypes$2;
|
|
752
|
+
Results.defaultProps = defaultProps$2;
|
|
786
753
|
|
|
787
|
-
var styles = {"container":"micromag-screen-quiz-
|
|
754
|
+
var styles = {"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"};
|
|
788
755
|
|
|
789
756
|
var propTypes$1 = {
|
|
790
757
|
title: core.PropTypes.textElement,
|
|
791
758
|
description: core.PropTypes.textElement,
|
|
759
|
+
button: core.PropTypes.textElement,
|
|
792
760
|
layout: PropTypes__default["default"].string,
|
|
761
|
+
focusable: PropTypes__default["default"].bool,
|
|
793
762
|
transitions: core.PropTypes.transitions,
|
|
794
763
|
transitionPlaying: PropTypes__default["default"].bool,
|
|
795
764
|
transitionStagger: PropTypes__default["default"].number,
|
|
796
765
|
transitionDisabled: PropTypes__default["default"].bool,
|
|
797
766
|
className: PropTypes__default["default"].string,
|
|
798
|
-
style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
|
|
767
|
+
style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])),
|
|
768
|
+
onClickButton: PropTypes__default["default"].func
|
|
799
769
|
};
|
|
800
770
|
var defaultProps$1 = {
|
|
801
771
|
title: null,
|
|
802
772
|
description: null,
|
|
803
773
|
layout: null,
|
|
774
|
+
button: null,
|
|
775
|
+
focusable: false,
|
|
804
776
|
transitions: null,
|
|
805
777
|
transitionPlaying: false,
|
|
806
778
|
transitionStagger: 100,
|
|
807
779
|
transitionDisabled: false,
|
|
808
780
|
className: null,
|
|
809
|
-
style: null
|
|
781
|
+
style: null,
|
|
782
|
+
onClickButton: null
|
|
810
783
|
};
|
|
811
784
|
|
|
812
|
-
var
|
|
785
|
+
var Title = function Title(_ref) {
|
|
813
786
|
var layout = _ref.layout,
|
|
814
787
|
title = _ref.title,
|
|
815
788
|
description = _ref.description,
|
|
789
|
+
button = _ref.button,
|
|
790
|
+
focusable = _ref.focusable,
|
|
816
791
|
transitions = _ref.transitions,
|
|
817
792
|
transitionPlaying = _ref.transitionPlaying,
|
|
818
793
|
transitionStagger = _ref.transitionStagger,
|
|
819
794
|
transitionDisabled = _ref.transitionDisabled,
|
|
820
795
|
className = _ref.className,
|
|
821
|
-
style = _ref.style
|
|
796
|
+
style = _ref.style,
|
|
797
|
+
onClickButton = _ref.onClickButton;
|
|
798
|
+
|
|
799
|
+
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
800
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
801
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
802
|
+
|
|
822
803
|
var isSplitted = layout === 'split';
|
|
823
804
|
var verticalAlign = isSplitted ? null : layout;
|
|
824
805
|
var hasTitle = utils.isTextFilled(title);
|
|
825
806
|
var hasDescription = utils.isTextFilled(description);
|
|
807
|
+
var hasButton = utils.isTextFilled(button);
|
|
826
808
|
return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
|
|
827
809
|
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
828
810
|
fullscreen: true,
|
|
@@ -846,9 +828,7 @@ var Results = function Results(_ref) {
|
|
|
846
828
|
disabled: transitionDisabled
|
|
847
829
|
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, title, {
|
|
848
830
|
className: styles.title
|
|
849
|
-
}))) : null),
|
|
850
|
-
key: "spacer"
|
|
851
|
-
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
831
|
+
}))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
852
832
|
key: "description",
|
|
853
833
|
placeholder: "text",
|
|
854
834
|
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
@@ -860,18 +840,42 @@ var Results = function Results(_ref) {
|
|
|
860
840
|
}),
|
|
861
841
|
emptyClassName: styles.emptyDescription,
|
|
862
842
|
isEmpty: !hasDescription
|
|
863
|
-
},
|
|
843
|
+
}, hasDescription ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
864
844
|
transitions: transitions,
|
|
865
845
|
playing: transitionPlaying,
|
|
866
846
|
disabled: transitionDisabled,
|
|
867
847
|
delay: transitionStagger
|
|
868
848
|
}, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
|
|
869
849
|
className: styles.description
|
|
870
|
-
}))) : null)]
|
|
850
|
+
}))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
851
|
+
key: "spacer"
|
|
852
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
853
|
+
key: "button",
|
|
854
|
+
placeholder: "button"
|
|
855
|
+
}, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
856
|
+
transitions: transitions,
|
|
857
|
+
playing: transitionPlaying,
|
|
858
|
+
disabled: transitionDisabled,
|
|
859
|
+
delay: transitionStagger * 2
|
|
860
|
+
}, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
861
|
+
disabled: isPreview || isEdit,
|
|
862
|
+
focusable: focusable,
|
|
863
|
+
buttonStyle: button !== null ? button.buttonStyle : null,
|
|
864
|
+
className: styles.button,
|
|
865
|
+
onClick: onClickButton
|
|
866
|
+
}, hasButton ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, button, {
|
|
867
|
+
className: styles.label
|
|
868
|
+
})) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
869
|
+
id: "D7LIZQ",
|
|
870
|
+
defaultMessage: [{
|
|
871
|
+
"type": 0,
|
|
872
|
+
"value": "Start"
|
|
873
|
+
}]
|
|
874
|
+
}))))]);
|
|
871
875
|
};
|
|
872
876
|
|
|
873
|
-
|
|
874
|
-
|
|
877
|
+
Title.propTypes = propTypes$1;
|
|
878
|
+
Title.defaultProps = defaultProps$1;
|
|
875
879
|
|
|
876
880
|
var propTypes = {
|
|
877
881
|
id: PropTypes__default["default"].string,
|
|
@@ -1260,7 +1264,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1260
1264
|
className: styles$2.callToAction,
|
|
1261
1265
|
callToAction: callToAction,
|
|
1262
1266
|
animationDisabled: isPreview,
|
|
1263
|
-
focusable: current && isView
|
|
1267
|
+
focusable: current && isView,
|
|
1268
|
+
screenSize: {
|
|
1269
|
+
width: width,
|
|
1270
|
+
height: height
|
|
1271
|
+
}
|
|
1264
1272
|
}) : null));
|
|
1265
1273
|
};
|
|
1266
1274
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-quiz",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.48",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@micromag/data": "^0.3.42",
|
|
57
57
|
"@micromag/element-background": "^0.3.42",
|
|
58
58
|
"@micromag/element-button": "^0.3.45",
|
|
59
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
59
|
+
"@micromag/element-call-to-action": "^0.3.48",
|
|
60
60
|
"@micromag/element-container": "^0.3.42",
|
|
61
61
|
"@micromag/element-heading": "^0.3.42",
|
|
62
62
|
"@micromag/element-layout": "^0.3.42",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "3d64ece9adf95e8d124800f5313307c594c834d9"
|
|
76
76
|
}
|