@micromag/core 0.3.77 → 0.3.81

package/es/components.js

@@ -2224,6 +2224,42 @@ var Empty = function Empty(_ref) {
 Empty.propTypes = propTypes$g;
 Empty.defaultProps = defaultProps$g;
 
+var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
+  var _ref = media || {},
+      _ref$files = _ref.files,
+      files = _ref$files === void 0 ? {} : _ref$files;
+
+  var _ref2 = files || {},
+      _ref2$original = _ref2.original,
+      originalFile = _ref2$original === void 0 ? null : _ref2$original;
+
+  var _ref3 = originalFile || {},
+      _ref3$name = _ref3.name,
+      originalName = _ref3$name === void 0 ? null : _ref3$name,
+      _ref3$mime = _ref3.mime,
+      originalMime = _ref3$mime === void 0 ? null : _ref3$mime;
+
+  var urls = formats.reduce(function (currentUrls, format) {
+    var finalFormat = isObject(format) ? format.format : format;
+    var formatExtension = isObject(format) ? format.name : format;
+    var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
+
+    if (file !== null) {
+      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+
+    var extensionRegExp = new RegExp(".".concat(formatExtension, "$"), 'i');
+    var mimeRegExp = new RegExp("".concat(finalFormat), 'i');
+
+    if (originalName !== null && originalName.match(extensionRegExp) !== null || originalMime !== null && originalMime.match(mimeRegExp) !== null) {
+      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+
+    return currentUrls;
+  }, []);
+  return urls;
+};
+
 var propTypes$f = {
   fonts: PropTypes.fonts,
   formats: PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
@@ -2242,29 +2278,38 @@ var defaultProps$f = {
   }, 'svg']
 };
 
-var FontFaces = function FontFaces(_ref) {
-  var fonts = _ref.fonts,
-      formats = _ref.formats;
+var FontFaces = function FontFaces(_ref4) {
+  var fonts = _ref4.fonts,
+      formats = _ref4.formats;
   var fontFaces = (fonts || []).filter(function (it) {
     return isObject(it) && it.type === 'custom' && (it.media || null) !== null;
-  }).map(function (_ref2) {
-    var _ref2$name = _ref2.name,
-        name = _ref2$name === void 0 ? null : _ref2$name,
-        _ref2$media = _ref2.media,
-        media = _ref2$media === void 0 ? null : _ref2$media;
-
-    var _ref3 = media || {},
-        _ref3$files = _ref3.files,
-        files = _ref3$files === void 0 ? {} : _ref3$files;
-
-    var urls = formats.reduce(function (currentUrls, format) {
-      var finalFormat = isObject(format) ? format.format : format;
-      var formatExtension = isObject(format) ? format.name : format;
-      var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
-      return file !== null ? [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]) : currentUrls;
-    }, []);
-    return urls.length > 0 && name !== null ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null;
-  }).filter(function (it) {
+  }).reduce(function (fontFontFaces, _ref5) {
+    var _ref5$name = _ref5.name,
+        name = _ref5$name === void 0 ? null : _ref5$name,
+        _ref5$media = _ref5.media,
+        media = _ref5$media === void 0 ? null : _ref5$media,
+        _ref5$variants = _ref5.variants,
+        variants = _ref5$variants === void 0 ? [] : _ref5$variants;
+
+    if (name === null) {
+      return fontFontFaces;
+    }
+
+    var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
+    return [].concat(_toConsumableArray(fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray((variants || []).map(function (_ref6) {
+      var weight = _ref6.weight,
+          style = _ref6.style,
+          _ref6$media = _ref6.media,
+          variantMedia = _ref6$media === void 0 ? null : _ref6$media;
+
+      if (variantMedia == null) {
+        return null;
+      }
+
+      var variantUrls = getUrlsFromMedia(variantMedia, formats);
+      return variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null;
+    })));
+  }, []).filter(function (it) {
     return it !== null;
   });
   return fontFaces.length > 0 ? /*#__PURE__*/React.createElement("style", {

package/es/hooks.js

@@ -545,11 +545,35 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
         name: font
       },
           type = _ref.type,
-          name = _ref.name;
+          name = _ref.name,
+          _ref$variants = _ref.variants,
+          variants = _ref$variants === void 0 ? [] : _ref$variants;
 
       if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
         return _objectSpread(_objectSpread({}, newConfig), {}, _defineProperty({}, type, {
-          families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? "".concat(name, ":400,700") : name])
+          families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? [name, (variants || []).filter(function (it) {
+            return it !== null;
+          }).join(',')].filter(function (it) {
+            return it !== null && it.length > 0;
+          }).join(':') : [name, (variants !== null ? [{
+            fvd: 'n4'
+          }].concat(_toConsumableArray(variants)) : []).map(function (_ref2) {
+            var _ref2$fvd = _ref2.fvd,
+                fvd = _ref2$fvd === void 0 ? null : _ref2$fvd,
+                _ref2$weight = _ref2.weight,
+                weight = _ref2$weight === void 0 ? null : _ref2$weight,
+                _ref2$style = _ref2.style,
+                style = _ref2$style === void 0 ? null : _ref2$style;
+            return fvd || [style, weight].filter(function (it) {
+              return it !== null;
+            }).map(function (it) {
+              return "".concat(it).substr(0, 1);
+            }).join('');
+          }).filter(function (it) {
+            return it !== null && it.length > 0;
+          }).join(',')].filter(function (it) {
+            return it !== null && it.length > 0;
+          }).join(':')])
         }));
       }
 
@@ -558,8 +582,8 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
     var hasConfig = config !== null;
 
     if (hasConfig && typeof window !== 'undefined') {
-      import('webfontloader').then(function (_ref2) {
-        var WebFont = _ref2["default"];
+      import('webfontloader').then(function (_ref3) {
+        var WebFont = _ref3["default"];
         return WebFont.load(_objectSpread(_objectSpread({}, config), {}, {
           timeout: 3000,
           active: function active() {

package/es/utils.js

@@ -582,6 +582,8 @@ var getStyleFromText = function getStyleFromText(value) {
       fontSize = _value$fontSize === void 0 ? null : _value$fontSize,
       _value$fontStyle = value.fontStyle,
       fontStyle = _value$fontStyle === void 0 ? null : _value$fontStyle,
+      _value$fontWeight = value.fontWeight,
+      fontWeight = _value$fontWeight === void 0 ? null : _value$fontWeight,
       _value$lineHeight = value.lineHeight,
       lineHeight = _value$lineHeight === void 0 ? null : _value$lineHeight,
       _value$letterSpacing = value.letterSpacing,
@@ -602,7 +604,7 @@ var getStyleFromText = function getStyleFromText(value) {
       _ref$outline = _ref.outline,
       outline = _ref$outline === void 0 ? false : _ref$outline;
 
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     fontFamily: getFontFamily(fontFamily)
   }, fontSize !== null ? {
     fontSize: fontSize
@@ -610,6 +612,8 @@ var getStyleFromText = function getStyleFromText(value) {
     fontStyle: 'italic'
   } : null), bold ? {
     fontWeight: 'bold'
+  } : null), fontWeight !== null ? {
+    fontWeight: fontWeight
   } : null), underline ? {
     textDecoration: 'underline'
   } : null), textTransform !== null ? {

package/lib/components.js

@@ -2247,6 +2247,42 @@ var Empty = function Empty(_ref) {
 Empty.propTypes = propTypes$g;
 Empty.defaultProps = defaultProps$g;
 
+var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
+  var _ref = media || {},
+      _ref$files = _ref.files,
+      files = _ref$files === void 0 ? {} : _ref$files;
+
+  var _ref2 = files || {},
+      _ref2$original = _ref2.original,
+      originalFile = _ref2$original === void 0 ? null : _ref2$original;
+
+  var _ref3 = originalFile || {},
+      _ref3$name = _ref3.name,
+      originalName = _ref3$name === void 0 ? null : _ref3$name,
+      _ref3$mime = _ref3.mime,
+      originalMime = _ref3$mime === void 0 ? null : _ref3$mime;
+
+  var urls = formats.reduce(function (currentUrls, format) {
+    var finalFormat = isObject__default["default"](format) ? format.format : format;
+    var formatExtension = isObject__default["default"](format) ? format.name : format;
+    var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
+
+    if (file !== null) {
+      return [].concat(_toConsumableArray__default["default"](currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+
+    var extensionRegExp = new RegExp(".".concat(formatExtension, "$"), 'i');
+    var mimeRegExp = new RegExp("".concat(finalFormat), 'i');
+
+    if (originalName !== null && originalName.match(extensionRegExp) !== null || originalMime !== null && originalMime.match(mimeRegExp) !== null) {
+      return [].concat(_toConsumableArray__default["default"](currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+
+    return currentUrls;
+  }, []);
+  return urls;
+};
+
 var propTypes$f = {
   fonts: core.PropTypes.fonts,
   formats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
@@ -2265,29 +2301,38 @@ var defaultProps$f = {
   }, 'svg']
 };
 
-var FontFaces = function FontFaces(_ref) {
-  var fonts = _ref.fonts,
-      formats = _ref.formats;
+var FontFaces = function FontFaces(_ref4) {
+  var fonts = _ref4.fonts,
+      formats = _ref4.formats;
   var fontFaces = (fonts || []).filter(function (it) {
     return isObject__default["default"](it) && it.type === 'custom' && (it.media || null) !== null;
-  }).map(function (_ref2) {
-    var _ref2$name = _ref2.name,
-        name = _ref2$name === void 0 ? null : _ref2$name,
-        _ref2$media = _ref2.media,
-        media = _ref2$media === void 0 ? null : _ref2$media;
-
-    var _ref3 = media || {},
-        _ref3$files = _ref3.files,
-        files = _ref3$files === void 0 ? {} : _ref3$files;
-
-    var urls = formats.reduce(function (currentUrls, format) {
-      var finalFormat = isObject__default["default"](format) ? format.format : format;
-      var formatExtension = isObject__default["default"](format) ? format.name : format;
-      var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
-      return file !== null ? [].concat(_toConsumableArray__default["default"](currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]) : currentUrls;
-    }, []);
-    return urls.length > 0 && name !== null ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null;
-  }).filter(function (it) {
+  }).reduce(function (fontFontFaces, _ref5) {
+    var _ref5$name = _ref5.name,
+        name = _ref5$name === void 0 ? null : _ref5$name,
+        _ref5$media = _ref5.media,
+        media = _ref5$media === void 0 ? null : _ref5$media,
+        _ref5$variants = _ref5.variants,
+        variants = _ref5$variants === void 0 ? [] : _ref5$variants;
+
+    if (name === null) {
+      return fontFontFaces;
+    }
+
+    var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
+    return [].concat(_toConsumableArray__default["default"](fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray__default["default"]((variants || []).map(function (_ref6) {
+      var weight = _ref6.weight,
+          style = _ref6.style,
+          _ref6$media = _ref6.media,
+          variantMedia = _ref6$media === void 0 ? null : _ref6$media;
+
+      if (variantMedia == null) {
+        return null;
+      }
+
+      var variantUrls = getUrlsFromMedia(variantMedia, formats);
+      return variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null;
+    })));
+  }, []).filter(function (it) {
     return it !== null;
   });
   return fontFaces.length > 0 ? /*#__PURE__*/React__default["default"].createElement("style", {

package/lib/hooks.js

@@ -581,11 +581,35 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
         name: font
       },
           type = _ref.type,
-          name = _ref.name;
+          name = _ref.name,
+          _ref$variants = _ref.variants,
+          variants = _ref$variants === void 0 ? [] : _ref$variants;
 
       if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
         return _objectSpread__default["default"](_objectSpread__default["default"]({}, newConfig), {}, _defineProperty__default["default"]({}, type, {
-          families: [].concat(_toConsumableArray__default["default"](newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? "".concat(name, ":400,700") : name])
+          families: [].concat(_toConsumableArray__default["default"](newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? [name, (variants || []).filter(function (it) {
+            return it !== null;
+          }).join(',')].filter(function (it) {
+            return it !== null && it.length > 0;
+          }).join(':') : [name, (variants !== null ? [{
+            fvd: 'n4'
+          }].concat(_toConsumableArray__default["default"](variants)) : []).map(function (_ref2) {
+            var _ref2$fvd = _ref2.fvd,
+                fvd = _ref2$fvd === void 0 ? null : _ref2$fvd,
+                _ref2$weight = _ref2.weight,
+                weight = _ref2$weight === void 0 ? null : _ref2$weight,
+                _ref2$style = _ref2.style,
+                style = _ref2$style === void 0 ? null : _ref2$style;
+            return fvd || [style, weight].filter(function (it) {
+              return it !== null;
+            }).map(function (it) {
+              return "".concat(it).substr(0, 1);
+            }).join('');
+          }).filter(function (it) {
+            return it !== null && it.length > 0;
+          }).join(',')].filter(function (it) {
+            return it !== null && it.length > 0;
+          }).join(':')])
         }));
       }
 
@@ -594,8 +618,8 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
     var hasConfig = config !== null;
 
     if (hasConfig && typeof window !== 'undefined') {
-      Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); }).then(function (_ref2) {
-        var WebFont = _ref2["default"];
+      Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); }).then(function (_ref3) {
+        var WebFont = _ref3["default"];
         return WebFont.load(_objectSpread__default["default"](_objectSpread__default["default"]({}, config), {}, {
           timeout: 3000,
           active: function active() {

package/lib/utils.js

@@ -599,6 +599,8 @@ var getStyleFromText = function getStyleFromText(value) {
       fontSize = _value$fontSize === void 0 ? null : _value$fontSize,
       _value$fontStyle = value.fontStyle,
       fontStyle = _value$fontStyle === void 0 ? null : _value$fontStyle,
+      _value$fontWeight = value.fontWeight,
+      fontWeight = _value$fontWeight === void 0 ? null : _value$fontWeight,
       _value$lineHeight = value.lineHeight,
       lineHeight = _value$lineHeight === void 0 ? null : _value$lineHeight,
       _value$letterSpacing = value.letterSpacing,
@@ -619,7 +621,7 @@ var getStyleFromText = function getStyleFromText(value) {
       _ref$outline = _ref.outline,
       outline = _ref$outline === void 0 ? false : _ref$outline;
 
-  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"](_objectSpread__default["default"]({
+  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"](_objectSpread__default["default"](_objectSpread__default["default"]({
     fontFamily: getFontFamily(fontFamily)
   }, fontSize !== null ? {
     fontSize: fontSize
@@ -627,6 +629,8 @@ var getStyleFromText = function getStyleFromText(value) {
     fontStyle: 'italic'
   } : null), bold ? {
     fontWeight: 'bold'
+  } : null), fontWeight !== null ? {
+    fontWeight: fontWeight
   } : null), underline ? {
     textDecoration: 'underline'
   } : null), textTransform !== null ? {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.77",
+    "version": "0.3.81",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "12effe09a1b53e8ff487695a17d1d4fff412482e"
+    "gitHead": "4fec1502a42a4813cc39e24de20c6cd47134cc62"
 }