@micromag/core 0.3.110 → 0.3.111

package/es/components.js

@@ -8,7 +8,7 @@ import { PropTypes } from '@micromag/core';
 import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft, faAngleUp, faAngleDown, faAd, faImage, faMusic, faMapMarkerAlt, faMapMarkedAlt, faVideo, faPlay, faRedo, faCommentDots, faCheck, faTimes, faPercent } from '@fortawesome/free-solid-svg-icons';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
@@ -18,14 +18,28 @@ import get from 'lodash/get';
 import ReactDOM from 'react-dom';
 import { DashboardModal } from '@uppy/react';
 import isArray from 'lodash/isArray';
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
+import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
 import dayjs from 'dayjs';
 import throttle from 'lodash/throttle';
 import isObject from 'lodash/isObject';
 import { Helmet } from 'react-helmet';
 import isString from 'lodash/isString';
 import 'snake-case';
+import { faAd } from '@fortawesome/free-solid-svg-icons/faAd';
+import { faImage } from '@fortawesome/free-solid-svg-icons/faImage';
+import { faMusic } from '@fortawesome/free-solid-svg-icons/faMusic';
 import isNumber from 'lodash/isNumber';
+import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons/faMapMarkerAlt';
+import { faMapMarkedAlt } from '@fortawesome/free-solid-svg-icons/faMapMarkedAlt';
+import { faVideo } from '@fortawesome/free-solid-svg-icons/faVideo';
+import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
+import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { getSizeWithinBounds } from '@folklore/size';
+import { faCommentDots } from '@fortawesome/free-solid-svg-icons/faCommentDots';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faPercent } from '@fortawesome/free-solid-svg-icons/faPercent';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 

package/es/utils.js

@@ -405,8 +405,8 @@ var getScreenExtraField = function getScreenExtraField(intl) {
 };
 
 function getShadowCoords(angle, distance) {
-  var x = Math.cos(angle) * distance;
-  var y = Math.sin(angle) * distance;
+  var x = (Math.cos(angle) * distance).toFixed(3);
+  var y = (Math.sin(angle) * distance).toFixed(3);
   return {
     x: x,
     y: y
@@ -446,21 +446,23 @@ var getStyleFromShadow = function getStyleFromShadow(value) {
 
   var _ref = value || {},
       _ref$shadowAngle = _ref.shadowAngle,
-      shadowAngle = _ref$shadowAngle === void 0 ? 0 : _ref$shadowAngle,
+      shadowAngle = _ref$shadowAngle === void 0 ? null : _ref$shadowAngle,
       _ref$shadowDistance = _ref.shadowDistance,
-      shadowDistance = _ref$shadowDistance === void 0 ? 5 : _ref$shadowDistance,
+      shadowDistance = _ref$shadowDistance === void 0 ? null : _ref$shadowDistance,
       _ref$shadowBlur = _ref.shadowBlur,
-      shadowBlur = _ref$shadowBlur === void 0 ? 0 : _ref$shadowBlur,
+      shadowBlur = _ref$shadowBlur === void 0 ? null : _ref$shadowBlur,
       _ref$shadowColor = _ref.shadowColor,
-      shadowColor = _ref$shadowColor === void 0 ? '#000000' : _ref$shadowColor;
+      shadowColor = _ref$shadowColor === void 0 ? null : _ref$shadowColor;
 
-  var color = getColorAsString(shadowColor);
+  if (!shadowAngle) return null;
+  var blur = shadowBlur || '0';
+  var color = getColorAsString(shadowColor) || '#000000';
 
   var _getShadowCoords = getShadowCoords(shadowAngle, shadowDistance),
       x = _getShadowCoords.x,
       y = _getShadowCoords.y;
 
-  var boxShadow = "".concat(x, "px ").concat(y, "px ").concat(shadowBlur, "px 0 ").concat(color);
+  var boxShadow = "".concat(x, "px ").concat(y, "px ").concat(blur, "px 0 ").concat(color);
   return {
     boxShadow: boxShadow
   };
@@ -527,7 +529,7 @@ var getStyleFromBox = function getStyleFromBox(value) {
 
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
     borderRadius: borderRadius
-  } : null), getStyleFromBorder(border)), shadowAngle ? getStyleFromShadow(shadow) : null), padding !== null || paddingValue !== null ? {
+  } : null), getStyleFromBorder(border)), getStyleFromShadow(shadow)), padding !== null || paddingValue !== null ? {
     padding: padding || paddingValue
   } : null), paddingTop !== null || paddingValueTop !== null ? {
     paddingTop: paddingTop || paddingValueTop

package/lib/components.js

@@ -12,7 +12,7 @@ var core = require('@micromag/core');
 var reactIntl = require('react-intl');
 var utils = require('@micromag/core/utils');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var faAngleLeft = require('@fortawesome/free-solid-svg-icons/faAngleLeft');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var contexts = require('@micromag/core/contexts');
@@ -22,14 +22,28 @@ var get = require('lodash/get');
 var ReactDOM = require('react-dom');
 var react = require('@uppy/react');
 var isArray = require('lodash/isArray');
+var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
+var faAngleUp = require('@fortawesome/free-solid-svg-icons/faAngleUp');
 var dayjs = require('dayjs');
 var throttle = require('lodash/throttle');
 var isObject = require('lodash/isObject');
 var reactHelmet = require('react-helmet');
 var isString = require('lodash/isString');
 require('snake-case');
+var faAd = require('@fortawesome/free-solid-svg-icons/faAd');
+var faImage = require('@fortawesome/free-solid-svg-icons/faImage');
+var faMusic = require('@fortawesome/free-solid-svg-icons/faMusic');
 var isNumber = require('lodash/isNumber');
+var faMapMarkerAlt = require('@fortawesome/free-solid-svg-icons/faMapMarkerAlt');
+var faMapMarkedAlt = require('@fortawesome/free-solid-svg-icons/faMapMarkedAlt');
+var faVideo = require('@fortawesome/free-solid-svg-icons/faVideo');
+var faPlay = require('@fortawesome/free-solid-svg-icons/faPlay');
+var faRedo = require('@fortawesome/free-solid-svg-icons/faRedo');
 var size = require('@folklore/size');
+var faCommentDots = require('@fortawesome/free-solid-svg-icons/faCommentDots');
+var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
+var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
+var faPercent = require('@fortawesome/free-solid-svg-icons/faPercent');
 var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
 
@@ -313,7 +327,7 @@ var BackButton = function BackButton(_ref) {
     className: classNames__default["default"](['px-2', _defineProperty__default["default"]({}, className, className)]),
     size: "sm",
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faAngleLeft,
+      icon: faAngleLeft.faAngleLeft,
       size: "lg"
     })
   }, props));
@@ -1988,7 +2002,7 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     withoutStyle: true,
     className: classNames__default["default"]([styles$h.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: opened ? freeSolidSvgIcons.faAngleUp : freeSolidSvgIcons.faAngleDown,
+      icon: opened ? faAngleUp.faAngleUp : faAngleDown.faAngleDown,
       className: styles$h.icon
     }),
     iconPosition: "right",
@@ -3168,7 +3182,7 @@ var AdFrame = function AdFrame(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faAd,
+    icon: faAd.faAd,
     className: styles$c.icon
   }));
 };
@@ -3183,7 +3197,7 @@ var AdImage = function AdImage(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faImage,
+    icon: faImage.faImage,
     className: styles$c.icon
   }));
 };
@@ -3200,7 +3214,7 @@ var Audio = function Audio(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faMusic,
+    icon: faMusic.faMusic,
     className: styles$c.icon
   }));
 };
@@ -3280,7 +3294,7 @@ var Image = function Image(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faImage,
+    icon: faImage.faImage,
     className: styles$c.icon
   }));
 };
@@ -3302,16 +3316,16 @@ var Map = function Map(props) {
     height: "100%",
     className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, props.className, props.className !== null)])
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$a.icon
   }));
 };
@@ -3323,7 +3337,7 @@ var MapPath = function MapPath(props) {
     height: "70%",
     className: classNames__default["default"]([props.className, styles$c.mapPath])
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faMapMarkedAlt,
+    icon: faMapMarkedAlt.faMapMarkedAlt,
     size: "lg",
     className: styles$c.icon
   }));
@@ -3400,7 +3414,7 @@ var Video = function Video(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faVideo,
+    icon: faVideo.faVideo,
     className: styles$c.icon
   }));
 };
@@ -3417,7 +3431,7 @@ var Video360 = function Video360(_ref) {
     className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
     boxClassName: styles$9.box
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faVideo,
+    icon: faVideo.faVideo,
     className: styles$9.icon
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$9.label
@@ -3434,10 +3448,10 @@ var VideoLoop = function VideoLoop(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faPlay,
+    icon: faPlay.faPlay,
     className: styles$c.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faRedo,
+    icon: faRedo.faRedo,
     className: styles$c.icon
   }));
 };
@@ -3761,7 +3775,7 @@ var Conversation = function Conversation() {
       className: classNames__default["default"]([styles$4.message, styles$4["placeholderMessage".concat(idx)]])
     });
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faCommentDots,
+    icon: faCommentDots.faCommentDots,
     className: styles$4.icon
   }));
 };
@@ -3799,7 +3813,7 @@ var Answer$1 = function Answer(_ref) {
     className: styles$3.answer
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$3.answerIcon,
-    icon: good ? freeSolidSvgIcons.faCheck : freeSolidSvgIcons.faTimes
+    icon: good ? faCheck.faCheck : faTimes.faTimes
   })), /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
     outline: true,
     width: width,
@@ -3833,7 +3847,7 @@ var Answer = function Answer(_ref) {
     className: styles$2.percent
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$2.percentIcon,
-    icon: freeSolidSvgIcons.faPercent
+    icon: faPercent.faPercent
   })));
 };
 

package/lib/utils.js

@@ -422,8 +422,8 @@ var getScreenExtraField = function getScreenExtraField(intl) {
 };
 
 function getShadowCoords(angle, distance) {
-  var x = Math.cos(angle) * distance;
-  var y = Math.sin(angle) * distance;
+  var x = (Math.cos(angle) * distance).toFixed(3);
+  var y = (Math.sin(angle) * distance).toFixed(3);
   return {
     x: x,
     y: y
@@ -463,21 +463,23 @@ var getStyleFromShadow = function getStyleFromShadow(value) {
 
   var _ref = value || {},
       _ref$shadowAngle = _ref.shadowAngle,
-      shadowAngle = _ref$shadowAngle === void 0 ? 0 : _ref$shadowAngle,
+      shadowAngle = _ref$shadowAngle === void 0 ? null : _ref$shadowAngle,
       _ref$shadowDistance = _ref.shadowDistance,
-      shadowDistance = _ref$shadowDistance === void 0 ? 5 : _ref$shadowDistance,
+      shadowDistance = _ref$shadowDistance === void 0 ? null : _ref$shadowDistance,
       _ref$shadowBlur = _ref.shadowBlur,
-      shadowBlur = _ref$shadowBlur === void 0 ? 0 : _ref$shadowBlur,
+      shadowBlur = _ref$shadowBlur === void 0 ? null : _ref$shadowBlur,
       _ref$shadowColor = _ref.shadowColor,
-      shadowColor = _ref$shadowColor === void 0 ? '#000000' : _ref$shadowColor;
+      shadowColor = _ref$shadowColor === void 0 ? null : _ref$shadowColor;
 
-  var color = getColorAsString(shadowColor);
+  if (!shadowAngle) return null;
+  var blur = shadowBlur || '0';
+  var color = getColorAsString(shadowColor) || '#000000';
 
   var _getShadowCoords = getShadowCoords(shadowAngle, shadowDistance),
       x = _getShadowCoords.x,
       y = _getShadowCoords.y;
 
-  var boxShadow = "".concat(x, "px ").concat(y, "px ").concat(shadowBlur, "px 0 ").concat(color);
+  var boxShadow = "".concat(x, "px ").concat(y, "px ").concat(blur, "px 0 ").concat(color);
   return {
     boxShadow: boxShadow
   };
@@ -544,7 +546,7 @@ var getStyleFromBox = function getStyleFromBox(value) {
 
   return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
     borderRadius: borderRadius
-  } : null), getStyleFromBorder(border)), shadowAngle ? getStyleFromShadow(shadow) : null), padding !== null || paddingValue !== null ? {
+  } : null), getStyleFromBorder(border)), getStyleFromShadow(shadow)), padding !== null || paddingValue !== null ? {
     padding: padding || paddingValue
   } : null), paddingTop !== null || paddingValueTop !== null ? {
     paddingTop: paddingTop || paddingValueTop

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.110",
+    "version": "0.3.111",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a4a09bb4e14c7ee52330258a2e9a02b3cc8809a7"
+    "gitHead": "0b8e0748efe102dae09d162dc4f06a0b0797ea35"
 }