@micromag/screen-survey 0.3.115 → 0.3.120

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-survey-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{position:relative;padding:6px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{position:absolute;top:0;left:0;height:100%;background-color:hsla(0,0%,100%,.2)}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{position:absolute;top:50%;right:0;width:4em;padding:0 8px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#fff;text-align:right}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%;padding:10px}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;-o-transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{width:100%;margin:0 auto}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-right:50px;padding-left:15px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{width:100%;opacity:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-right:0;margin-left:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-right:2em;margin-left:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
+.micromag-screen-survey-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{position:relative;padding:6px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{position:absolute;top:0;left:0;height:100%;background-color:hsla(0,0%,100%,.2)}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{position:absolute;z-index:1;top:50%;right:0;width:4em;padding:0 8px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#fff;text-align:right}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0;overflow:hidden;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%;padding:10px}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;-o-transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{width:100%;margin:0 auto}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-right:50px;padding-left:15px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{width:100%;opacity:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-right:0;margin-left:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-right:2em;margin-left:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}

package/es/index.js

@@ -10,7 +10,7 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, Transitions } from '@micromag/core/components';
 import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent } from '@micromag/core/hooks';
-import { isTextFilled, getLargestRemainderRound, getStyleFromBox, getStyleFromColor } from '@micromag/core/utils';
+import { isTextFilled, getLargestRemainderRound, getStyleFromColor } from '@micromag/core/utils';
 import { useQuizCreate, useQuiz } from '@micromag/data';
 import Background from '@micromag/element-background';
 import Button from '@micromag/element-button';
@@ -28,6 +28,7 @@ var propTypes = {
   question: PropTypes$1.textElement,
   answers: PropTypes$1.answers,
   buttonsStyle: PropTypes$1.boxStyle,
+  buttonsTextStyle: PropTypes$1.textStyle,
   resultsStyle: PropTypes.shape({
     barColor: PropTypes$1.color,
     textColor: PropTypes$1.color
@@ -53,6 +54,7 @@ var defaultProps = {
   question: null,
   answers: null,
   buttonsStyle: null,
+  buttonsTextStyle: null,
   resultsStyle: null,
   spacing: 20,
   background: null,
@@ -78,6 +80,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
       question = _ref.question,
       answers = _ref.answers,
       buttonsStyle = _ref.buttonsStyle,
+      buttonsTextStyle = _ref.buttonsTextStyle,
       resultsStyle = _ref.resultsStyle,
       spacing = _ref.spacing,
       background = _ref.background,
@@ -283,6 +286,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
         label = _ref10$label === void 0 ? null : _ref10$label,
         _ref10$buttonStyle = _ref10.buttonStyle,
         answerButtonStyle = _ref10$buttonStyle === void 0 ? null : _ref10$buttonStyle,
+        _ref10$textStyle = _ref10.textStyle,
+        answerButtonTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle,
         _ref10$resultStyle = _ref10.resultStyle,
         answerResultStyle = _ref10$resultStyle === void 0 ? null : _ref10$resultStyle;
 
@@ -336,7 +341,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.itemInner,
       style: {
-        // width: buttonMaxWidth,
         transitionDuration: finalTransitionDuration
       }
     }, /*#__PURE__*/React.createElement(Button, {
@@ -346,13 +350,14 @@ var SurveyScreen = function SurveyScreen(_ref) {
       },
       disabled: isPreview || userAnswerIndex !== null,
       focusable: current && isView,
-      buttonStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), getStyleFromBox(answerButtonStyle)), answered ? {
+      buttonStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
         textAlign: 'left'
-      } : null)
+      } : null),
+      textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle)
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.itemLabel
     }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
-      textStyle: textStyle,
+      textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle),
       inline: true,
       className: styles.itemText
     })), !withoutPercentage ? /*#__PURE__*/React.createElement("div", {
@@ -363,7 +368,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
         opacity: 0
       })
     }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
-      textStyle: textStyle,
+      textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), resultsTextColor), answerResultTextColor),
       inline: true,
       className: styles.resultText,
       body: "".concat(percent, "%")
@@ -536,6 +541,16 @@ var definition = {
           "value": "Buttons"
         }]
       })
+    }, {
+      name: 'buttonsTextStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "gwPu/I",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Buttons text"
+        }]
+      })
     }, {
       name: 'resultsStyle',
       type: 'field-with-form',

package/lib/index.js

@@ -49,6 +49,7 @@ var propTypes = {
   question: core.PropTypes.textElement,
   answers: core.PropTypes.answers,
   buttonsStyle: core.PropTypes.boxStyle,
+  buttonsTextStyle: core.PropTypes.textStyle,
   resultsStyle: PropTypes__default["default"].shape({
     barColor: core.PropTypes.color,
     textColor: core.PropTypes.color
@@ -74,6 +75,7 @@ var defaultProps = {
   question: null,
   answers: null,
   buttonsStyle: null,
+  buttonsTextStyle: null,
   resultsStyle: null,
   spacing: 20,
   background: null,
@@ -99,6 +101,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
       question = _ref.question,
       answers = _ref.answers,
       buttonsStyle = _ref.buttonsStyle,
+      buttonsTextStyle = _ref.buttonsTextStyle,
       resultsStyle = _ref.resultsStyle,
       spacing = _ref.spacing,
       background = _ref.background,
@@ -304,6 +307,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
         label = _ref10$label === void 0 ? null : _ref10$label,
         _ref10$buttonStyle = _ref10.buttonStyle,
         answerButtonStyle = _ref10$buttonStyle === void 0 ? null : _ref10$buttonStyle,
+        _ref10$textStyle = _ref10.textStyle,
+        answerButtonTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle,
         _ref10$resultStyle = _ref10.resultStyle,
         answerResultStyle = _ref10$resultStyle === void 0 ? null : _ref10$resultStyle;
 
@@ -357,7 +362,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles.itemInner,
       style: {
-        // width: buttonMaxWidth,
         transitionDuration: finalTransitionDuration
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
@@ -367,13 +371,14 @@ var SurveyScreen = function SurveyScreen(_ref) {
       },
       disabled: isPreview || userAnswerIndex !== null,
       focusable: current && isView,
-      buttonStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, buttonsStyle), utils.getStyleFromBox(answerButtonStyle)), answered ? {
+      buttonStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, buttonsStyle), answerButtonStyle), answered ? {
         textAlign: 'left'
-      } : null)
+      } : null),
+      textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), buttonsTextStyle), answerButtonTextStyle)
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: styles.itemLabel
     }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
-      textStyle: textStyle,
+      textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), buttonsTextStyle), answerButtonTextStyle),
       inline: true,
       className: styles.itemText
     })), !withoutPercentage ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -384,7 +389,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
         opacity: 0
       })
     }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
-      textStyle: textStyle,
+      textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), resultsTextColor), answerResultTextColor),
       inline: true,
       className: styles.resultText,
       body: "".concat(percent, "%")
@@ -557,6 +562,16 @@ var definition = {
           "value": "Buttons"
         }]
       })
+    }, {
+      name: 'buttonsTextStyle',
+      type: 'text-style-form',
+      label: reactIntl.defineMessage({
+        id: "gwPu/I",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Buttons text"
+        }]
+      })
     }, {
       name: 'resultsStyle',
       type: 'field-with-form',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-survey",
-    "version": "0.3.115",
+    "version": "0.3.120",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,17 +49,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.115",
-        "@micromag/data": "^0.3.115",
-        "@micromag/element-background": "^0.3.115",
-        "@micromag/element-button": "^0.3.115",
-        "@micromag/element-call-to-action": "^0.3.115",
-        "@micromag/element-container": "^0.3.115",
-        "@micromag/element-heading": "^0.3.115",
-        "@micromag/element-layout": "^0.3.115",
-        "@micromag/element-scroll": "^0.3.115",
-        "@micromag/element-text": "^0.3.115",
-        "@micromag/transforms": "^0.3.115",
+        "@micromag/core": "^0.3.120",
+        "@micromag/data": "^0.3.120",
+        "@micromag/element-background": "^0.3.120",
+        "@micromag/element-button": "^0.3.120",
+        "@micromag/element-call-to-action": "^0.3.120",
+        "@micromag/element-container": "^0.3.120",
+        "@micromag/element-heading": "^0.3.120",
+        "@micromag/element-layout": "^0.3.120",
+        "@micromag/element-scroll": "^0.3.120",
+        "@micromag/element-text": "^0.3.120",
+        "@micromag/transforms": "^0.3.120",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "47c269c5f0b4b423cb5bb187f12ec821479b89dc"
+    "gitHead": "997e92f10cf01fd5557b5c842c62bacf0babbd5a"
 }