@micromag/core 0.3.27 → 0.3.33

package/assets/css/styles.css

@@ -22,9 +22,9 @@
 .micromag-core-placeholders-map-container:before{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-core-placeholders-map-container{position:relative}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon{position:absolute;width:15%;height:15%;color:#1c1c1c}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:first-child{top:10%;left:40%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(2){top:35%;left:60%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(3){top:50%;left:15%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(4){top:70%;left:60%}.micromag-core-placeholders-map-container:before{content:"";display:block;opacity:.2;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAEyCAYAAABnKjtfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDU4NzhDN0UyODU2MTFFQkI3MTBBRTZGMTAwMEE1QTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDU4NzhDN0QyODU2MTFFQkI3MTBBRTZGMTAwMEE1QTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNTg3OEM3OTI4NTYxMUVCQjcxMEFFNkYxMDAwQTVBMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNTg3OEM3QTI4NTYxMUVCQjcxMEFFNkYxMDAwQTVBMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpB4mwIAAAxNSURBVHja7J1B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");background-size:cover}
 .micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-box{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-icon{margin-bottom:5px;color:#1c1c1c}.micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-label{font-size:.75em;color:#1c1c1c}
 .micromag-core-screens-screen-sizer-container,.micromag-core-screens-screen-sizer-frame{position:relative}.micromag-core-screens-screen-sizer-screen{position:absolute;top:0;left:0;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}
-.micromag-core-screens-screen-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-core-screens-screen-container address,.micromag-core-screens-screen-container blockquote,.micromag-core-screens-screen-container caption,.micromag-core-screens-screen-container dl,.micromag-core-screens-screen-container figure,.micromag-core-screens-screen-container h1,.micromag-core-screens-screen-container h2,.micromag-core-screens-screen-container h3,.micromag-core-screens-screen-container h4,.micromag-core-screens-screen-container h5,.micromag-core-screens-screen-container h6,.micromag-core-screens-screen-container label,.micromag-core-screens-screen-container legend,.micromag-core-screens-screen-container li,.micromag-core-screens-screen-container ol,.micromag-core-screens-screen-container p,.micromag-core-screens-screen-container pre,.micromag-core-screens-screen-container ul{margin:0;padding:0}.micromag-core-screens-screen-container *,.micromag-core-screens-screen-container :after,.micromag-core-screens-screen-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-core-screens-screen-container{background-color:#1c1c1c;color:#fff}
+.micromag-core-screens-screen-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-core-screens-screen-container address,.micromag-core-screens-screen-container blockquote,.micromag-core-screens-screen-container caption,.micromag-core-screens-screen-container dl,.micromag-core-screens-screen-container figure,.micromag-core-screens-screen-container h1,.micromag-core-screens-screen-container h2,.micromag-core-screens-screen-container h3,.micromag-core-screens-screen-container h4,.micromag-core-screens-screen-container h5,.micromag-core-screens-screen-container h6,.micromag-core-screens-screen-container label,.micromag-core-screens-screen-container legend,.micromag-core-screens-screen-container li,.micromag-core-screens-screen-container ol,.micromag-core-screens-screen-container p,.micromag-core-screens-screen-container pre,.micromag-core-screens-screen-container ul{margin:0;padding:0}.micromag-core-screens-screen-container *,.micromag-core-screens-screen-container :after,.micromag-core-screens-screen-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-core-screens-screen-container h1,.micromag-core-screens-screen-container h2,.micromag-core-screens-screen-container h3,.micromag-core-screens-screen-container h4,.micromag-core-screens-screen-container h5,.micromag-core-screens-screen-container h6,.micromag-core-screens-screen-container li,.micromag-core-screens-screen-container p{font-weight:400}.micromag-core-screens-screen-container{background-color:#1c1c1c;color:#fff}
 .micromag-core-screens-screen-placeholder-screen{overflow:hidden;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.micromag-core-screens-preview-screen{overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.micromag-core-screens-preview-stack{position:relative;overflow:hidden}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackScreen{position:relative;z-index:10}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem{position:absolute;top:0;left:0;border:1px solid #adadad;background-color:#494949}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:first-child{z-index:3}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:nth-child(2){z-index:2}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:nth-child(3){z-index:1}.micromag-core-screens-preview-screen{overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .micromag-core-placeholders-conversation-container{padding:10px;text-align:center;mix-blend-mode:difference}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-icon{width:25px;height:auto;margin:3px auto auto;color:hsla(0,0%,100%,.6)}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-message{width:80%;height:23px;margin:3px 1px 0;background-color:hsla(0,0%,100%,.6)}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage0{width:65%}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage1{margin-left:auto}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage2{width:65%}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage3{width:50%;margin-left:auto}
 .micromag-core-placeholders-quiz-answer-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;mix-blend-mode:difference}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-block{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-answer{width:12px;margin-right:6px;padding:0 1px;color:hsla(0,0%,100%,.6)}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-answerIcon{display:block;width:100%;height:100%;color:hsla(0,0%,100%,.6)}.micromag-core-placeholders-quiz-answer-container.micromag-core-placeholders-quiz-answer-good .micromag-core-placeholders-quiz-answer-answer{padding:0}
 .micromag-core-placeholders-survey-answer-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;mix-blend-mode:difference}.micromag-core-placeholders-survey-answer-container .micromag-core-placeholders-survey-answer-block{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-core-placeholders-survey-answer-container .micromag-core-placeholders-survey-answer-percent{margin-left:4px}.micromag-core-placeholders-survey-answer-container .micromag-core-placeholders-survey-answer-percentIcon{padding:1px;color:hsla(0,0%,100%,.6)}

package/es/components.js

@@ -1107,7 +1107,7 @@ var Dropdown = function Dropdown(_ref) {
         onClickItem(e);
       }
     } : null;
-    return ItemComponent !== null ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
+    return ItemComponent !== null ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
       key: "item-".concat(index, "-").concat(label),
       className: classNames([(_ref3 = {
         'dropdown-item': type === 'link' || type === 'button',
@@ -3589,7 +3589,7 @@ ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React.memo(ScreenPlaceholder);
 
-var styles$5 = {"screen":"micromag-core-screens-preview-screen"};
+var styles$5 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
 var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
 var propTypes$7 = {
@@ -3631,13 +3631,14 @@ var ScreenPreview = function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     className: classNames([styles$5.screen, _defineProperty({}, className, !withSize)])
   }, props));
-  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+  var screenWithSize = withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height
   }, screenElement) : screenElement;
+  return screenWithSize;
 };
 
 ScreenPreview.propTypes = propTypes$7;

package/es/contexts.js

@@ -1558,7 +1558,6 @@ var UppyProvider = function UppyProvider(_ref5) {
       return null;
     }
 
-    console.log('up', Uppy);
     return function () {
       var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 

package/es/index.js

@@ -1864,8 +1864,8 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
       var _ref3 = metadata || {},
           screenTitle = _ref3.title;
 
-      if (this.screensViewed.indexOf(screenId || index) !== -1) {
-        this.screensViewed = [].concat(_toConsumableArray(this.screensViewed), [screenId || index]);
+      if (this.screensViewed.indexOf(screenId || screenIndex) !== -1) {
+        this.screensViewed = [].concat(_toConsumableArray(this.screensViewed), [screenId || screenIndex]);
       }
 
       var data = {

package/es/utils.js

@@ -739,4 +739,20 @@ var validateFields = function validateFields(fields, value) {
   }, true);
 };
 
-export { convertStyleToString, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+var getContrastingColor = function getContrastingColor(backgroundColor) {
+  var _ref = backgroundColor || {},
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'white' : _ref$color;
+
+  if (tinycolor.equals(color, tinycolor('white'))) {
+    return 'lightblue';
+  }
+
+  if (tinycolor.equals(color, tinycolor('black'))) {
+    return 'white';
+  }
+
+  return tinycolor(color).spin(30).toString();
+};
+
+export { convertStyleToString, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -1130,7 +1130,7 @@ var Dropdown = function Dropdown(_ref) {
         onClickItem(e);
       }
     } : null;
-    return ItemComponent !== null ? /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(ItemComponent, Object.assign({
+    return ItemComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ItemComponent, Object.assign({
       key: "item-".concat(index, "-").concat(label),
       className: classNames__default["default"]([(_ref3 = {
         'dropdown-item': type === 'link' || type === 'button',
@@ -3612,7 +3612,7 @@ ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React__default["default"].memo(ScreenPlaceholder);
 
-var styles$5 = {"screen":"micromag-core-screens-preview-screen"};
+var styles$5 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
 var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
 var propTypes$7 = {
@@ -3654,13 +3654,14 @@ var ScreenPreview = function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     className: classNames__default["default"]([styles$5.screen, _defineProperty__default["default"]({}, className, !withSize)])
   }, props));
-  return withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
+  var screenWithSize = withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height
   }, screenElement) : screenElement;
+  return screenWithSize;
 };
 
 ScreenPreview.propTypes = propTypes$7;

package/lib/contexts.js

@@ -1593,7 +1593,6 @@ var UppyProvider = function UppyProvider(_ref5) {
       return null;
     }
 
-    console.log('up', Uppy);
     return function () {
       var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 

package/lib/index.js

@@ -1890,8 +1890,8 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
       var _ref3 = metadata || {},
           screenTitle = _ref3.title;
 
-      if (this.screensViewed.indexOf(screenId || index) !== -1) {
-        this.screensViewed = [].concat(_toConsumableArray__default["default"](this.screensViewed), [screenId || index]);
+      if (this.screensViewed.indexOf(screenId || screenIndex) !== -1) {
+        this.screensViewed = [].concat(_toConsumableArray__default["default"](this.screensViewed), [screenId || screenIndex]);
       }
 
       var data = {

package/lib/utils.js

@@ -756,6 +756,22 @@ var validateFields = function validateFields(fields, value) {
   }, true);
 };
 
+var getContrastingColor = function getContrastingColor(backgroundColor) {
+  var _ref = backgroundColor || {},
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'white' : _ref$color;
+
+  if (tinycolor__default["default"].equals(color, tinycolor__default["default"]('white'))) {
+    return 'lightblue';
+  }
+
+  if (tinycolor__default["default"].equals(color, tinycolor__default["default"]('black'))) {
+    return 'white';
+  }
+
+  return tinycolor__default["default"](color).spin(30).toString();
+};
+
 Object.defineProperty(exports, 'pascalCase', {
     enumerable: true,
     get: function () { return changeCase.pascalCase; }
@@ -769,6 +785,7 @@ exports.createNullableOnChange = createNullableOnChange;
 exports.createUseEvent = createUseEvent;
 exports.getColorAsString = getColorAsString;
 exports.getComponentFromName = getComponentFromName;
+exports.getContrastingColor = getContrastingColor;
 exports.getDeviceScreens = getDeviceScreens;
 exports.getDisplayName = getDisplayName;
 exports.getFieldByName = getFieldByName;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.27",
+    "version": "0.3.33",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "18798c7cbbab4d9a702e7070950394f05c1170cb"
+    "gitHead": "78b145a4e40bf65a48494f3dae58b3ce42534684"
 }

package/scss/_placeholders.scss

@@ -28,7 +28,7 @@
     *,
     *::before,
     *::after {
-      box-sizing: border-box; // 1
+        box-sizing: border-box; // 1
     }
 
     h1,
@@ -51,6 +51,17 @@
     legend {
         @extend %reset-viewer-elements;
     }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    li {
+        font-weight: normal;
+    }
 }
 
 %reset-button {