@micromag/core 0.3.348 → 0.3.359

package/es/components.js

@@ -1292,8 +1292,9 @@ var Dropdown = function Dropdown(_ref) {
         onClickItem(e);
       }
     } : null;
-    return ItemComponent !== null ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
-      key: "item-".concat(index, "-").concat(label, "-").concat(type),
+    return ItemComponent !== null ? /*#__PURE__*/React.createElement("div", {
+      key: "item-".concat(index, "-").concat(label, "-").concat(type)
+    }, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
       className: classNames([(_ref3 = {
         'dropdown-item': type === 'link' || type === 'button',
         'dropdown-divider': type === 'divider',
@@ -3101,6 +3102,10 @@ PropTypes$1.shape({
   id: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
   name: PropTypes$1.string
 });
+PropTypes$1.shape({
+  label: textElement,
+  buttonStyle: boxStyle
+});
 
 /* eslint-disable react/no-array-index-key */
 var propTypes$d = {

package/es/hooks.js

@@ -1599,7 +1599,9 @@ var useParsedStory = function useParsedStory(story) {
     _ref$withMedias = _ref.withMedias,
     withMedias = _ref$withMedias === void 0 ? true : _ref$withMedias,
     _ref$withFonts = _ref.withFonts,
-    withFonts = _ref$withFonts === void 0 ? true : _ref$withFonts;
+    withFonts = _ref$withFonts === void 0 ? true : _ref$withFonts,
+    _ref$withMigrations = _ref.withMigrations,
+    withMigrations = _ref$withMigrations === void 0 ? true : _ref$withMigrations;
   var screensManager = useScreensManager();
   var fieldsManager = useFieldsManager();
   var parser = useMemo(function () {
@@ -1615,7 +1617,8 @@ var useParsedStory = function useParsedStory(story) {
     return parser.parse(story, {
       withMedias: withMedias,
       withTheme: withTheme,
-      withFonts: withFonts
+      withFonts: withFonts,
+      withMigrations: withMigrations
     });
   }, [parser, disabled, withMedias, withTheme, withFonts, story]);
   return newStory;

package/es/index.js

@@ -25,8 +25,8 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'slugify';
 import uniqBy from 'lodash/uniqBy';
 import _typeof from '@babel/runtime/helpers/typeof';
-import isEmpty from 'lodash/isEmpty';
 import uniq from 'lodash/uniq';
+import isEmpty from 'lodash/isEmpty';
 import { Tracking as Tracking$1 } from '@folklore/tracking';
 
 /**
@@ -605,6 +605,10 @@ var visitor = PropTypes$1.shape({
   id: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
   name: PropTypes$1.string
 });
+var badge = PropTypes$1.shape({
+  label: textElement,
+  buttonStyle: boxStyle
+});
 
 var PropTypes = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -749,7 +753,8 @@ var PropTypes = /*#__PURE__*/Object.freeze({
     paymentItems: paymentItems,
     pageMetadata: pageMetadata,
     authorElement: authorElement,
-    visitor: visitor
+    visitor: visitor,
+    badge: badge
 });
 
 var sortedColors = function sortedColors(colors) {
@@ -1137,7 +1142,7 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   return FieldsManager;
 }(DefinitionsManager);
 
-var _excluded$3 = ["medias"];
+var _excluded$4 = ["medias"];
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -1193,7 +1198,7 @@ var MediasParser = /*#__PURE__*/function () {
       if (theme !== null) {
         var _this$toPath = this.toPath(theme),
           themeMedias = _this$toPath.medias,
-          newTheme = _objectWithoutProperties(_this$toPath, _excluded$3);
+          newTheme = _objectWithoutProperties(_this$toPath, _excluded$4);
         return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
           components: newComponents,
@@ -1425,7 +1430,197 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
   return ScreensManager;
 }(DefinitionsManager);
 
-var _excluded$2 = ["textStyle", "color", "boxStyle"];
+var _excluded$3 = ["fonts"];
+var FontsParser = /*#__PURE__*/function () {
+  function FontsParser(_ref) {
+    var fieldsManager = _ref.fieldsManager,
+      screensManager = _ref.screensManager;
+    _classCallCheck(this, FontsParser);
+    this.fieldsManager = fieldsManager;
+    this.screensManager = screensManager;
+    this.fieldsPatternCache = {};
+  }
+  _createClass(FontsParser, [{
+    key: "getFieldsPatternByScreen",
+    value: function getFieldsPatternByScreen(type) {
+      if (typeof this.fieldsPatternCache[type] === 'undefined') {
+        var _ref2 = this.screensManager.getDefinition(type) || {},
+          _ref2$fields = _ref2.fields,
+          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
+        this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
+      }
+      return this.fieldsPatternCache[type];
+    }
+
+    // Extract fonts
+  }, {
+    key: "parse",
+    value: function parse(story) {
+      var _this = this;
+      if (story === null) {
+        return story;
+      }
+
+      // Extract fonts from screen
+      var _ref3 = story || {},
+        _ref3$theme = _ref3.theme,
+        theme = _ref3$theme === void 0 ? null : _ref3$theme,
+        _ref3$components = _ref3.components,
+        components = _ref3$components === void 0 ? [] : _ref3$components;
+      var fonts = uniq(components.reduce(function (currentFonts, screen) {
+        var type = screen.type;
+        var fieldsPattern = _this.getFieldsPatternByScreen(type);
+        var newFonts = FontsParser.extractFontsWithPaths(screen, fieldsPattern);
+        return newFonts.length > 0 ? [].concat(_toConsumableArray(currentFonts), _toConsumableArray(newFonts)) : currentFonts;
+      }, []), 'name');
+
+      // Extract fonts from theme
+      if (theme !== null) {
+        var _this$parse = this.parse(theme),
+          _this$parse$fonts = _this$parse.fonts,
+          themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
+          newTheme = _objectWithoutProperties(_this$parse, _excluded$3);
+        return fonts.length > 0 || themeFonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
+          theme: newTheme,
+          fonts: uniq([].concat(_toConsumableArray(themeFonts), _toConsumableArray(fonts)), 'name')
+        }) : story;
+      }
+      return fonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
+        fonts: fonts
+      }) : story;
+    }
+  }, {
+    key: "getFieldsPattern",
+    value: function getFieldsPattern(fields) {
+      var _this2 = this;
+      var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      return fields.reduce(function (patterns, field) {
+        var _field$name = field.name,
+          name = _field$name === void 0 ? null : _field$name,
+          _field$type = field.type,
+          type = _field$type === void 0 ? null : _field$type;
+        var path = [namePrefix, name].filter(function (it) {
+          return it !== null;
+        }).join('\\.');
+        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
+
+        // also check settings fields
+        var _fieldDefinition$fiel = fieldDefinition.fields,
+          subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
+          _fieldDefinition$item = fieldDefinition.itemsField,
+          itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
+          _fieldDefinition$sett = fieldDefinition.settings,
+          settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
+        return [].concat(_toConsumableArray(patterns), _toConsumableArray(FontsParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray(_this2.getFieldsPattern(subFields, path)), _toConsumableArray(_this2.getFieldsPattern(settings, path)), _toConsumableArray(itemsField !== null ? _this2.getFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
+      }, []);
+    }
+  }], [{
+    key: "fieldIsFontFamily",
+    value: function fieldIsFontFamily(_ref4) {
+      var _ref4$id = _ref4.id,
+        id = _ref4$id === void 0 ? null : _ref4$id;
+      return id === 'font-family';
+    }
+  }, {
+    key: "valueIsFont",
+    value: function valueIsFont(_ref5) {
+      var _ref5$type = _ref5.type,
+        type = _ref5$type === void 0 ? null : _ref5$type;
+      return type === 'custom' || type === 'google';
+    }
+  }, {
+    key: "extractFontsWithPaths",
+    value: function extractFontsWithPaths(data, patterns) {
+      var keyPrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      var dataIsArray = isArray(data);
+      var keys = dataIsArray ? _toConsumableArray(data.keys()) : Object.keys(data);
+      return keys.reduce(function (currentFonts, key) {
+        var path = [keyPrefix, key].filter(function (it) {
+          return it !== null;
+        }).join('.');
+        var patternMatch = patterns.reduce(function (found, pattern) {
+          return found || pattern.test(path);
+        }, false);
+        var value = data[key];
+        var font = null;
+        var subFonts = null;
+        if (patternMatch && isObject(value) && FontsParser.valueIsFont(value)) {
+          font = value;
+        } else if (isObject(value) || isArray(value)) {
+          subFonts = FontsParser.extractFontsWithPaths(value, patterns, path);
+        }
+        return subFonts !== null || font !== null ? [].concat(_toConsumableArray(currentFonts), _toConsumableArray(subFonts || []), _toConsumableArray(font !== null ? [font] : [])) : currentFonts;
+      }, []);
+    }
+  }]);
+  return FontsParser;
+}();
+
+var _excluded$2 = ["components"],
+  _excluded2$1 = ["shareIncentive", "callToAction"];
+var MigrationsParser = /*#__PURE__*/function () {
+  function MigrationsParser(_ref) {
+    var fieldsManager = _ref.fieldsManager,
+      screensManager = _ref.screensManager;
+    _classCallCheck(this, MigrationsParser);
+    this.fieldsManager = fieldsManager;
+    this.screensManager = screensManager;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _createClass(MigrationsParser, [{
+    key: "parse",
+    value: function parse(story) {
+      if (story === null) {
+        return story;
+      }
+      var _ref2 = story || {},
+        _ref2$components = _ref2.components,
+        components = _ref2$components === void 0 ? [] : _ref2$components,
+        restStory = _objectWithoutProperties(_ref2, _excluded$2);
+      var finalComponents = components.reduce(function (currentComponents, screen) {
+        var _ref3 = screen || {},
+          _ref3$shareIncentive = _ref3.shareIncentive,
+          shareIncentive = _ref3$shareIncentive === void 0 ? null : _ref3$shareIncentive,
+          _ref3$callToAction = _ref3.callToAction,
+          callToAction = _ref3$callToAction === void 0 ? null : _ref3$callToAction,
+          restScreen = _objectWithoutProperties(_ref3, _excluded2$1);
+        if (shareIncentive === null && callToAction === null) {
+          return [].concat(_toConsumableArray(currentComponents), [restScreen]);
+        }
+        var _ref4 = screen || {},
+          _ref4$header = _ref4.header,
+          header = _ref4$header === void 0 ? null : _ref4$header,
+          _ref4$footer = _ref4.footer,
+          footer = _ref4$footer === void 0 ? null : _ref4$footer;
+
+        // Carful for recursivity here cause same key name
+        var newHeader = shareIncentive !== null ? _objectSpread(_objectSpread({}, shareIncentive !== null ? {
+          shareIncentive: shareIncentive
+        } : null), header !== null ? {
+          header: header
+        } : null) : header;
+        var newFooter = callToAction !== null ? _objectSpread(_objectSpread({}, callToAction !== null ? {
+          callToAction: callToAction
+        } : null), footer !== null ? {
+          footer: footer
+        } : null) : footer;
+        var newScreen = _objectSpread(_objectSpread(_objectSpread({}, restScreen), newHeader !== null ? {
+          header: newHeader
+        } : null), newFooter !== null ? {
+          footer: newFooter
+        } : null);
+        return [].concat(_toConsumableArray(currentComponents), [newScreen]);
+      }, []);
+      return _objectSpread(_objectSpread({}, restStory), {}, {
+        components: finalComponents
+      });
+    }
+  }]);
+  return MigrationsParser;
+}();
+
+var _excluded$1 = ["textStyle", "color", "boxStyle"];
 var ThemeParser = /*#__PURE__*/function () {
   function ThemeParser(_ref) {
     var screensManager = _ref.screensManager;
@@ -1519,6 +1714,7 @@ var ThemeParser = /*#__PURE__*/function () {
     value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
       var _definition$theme = definition.theme,
         fieldTheme = _definition$theme === void 0 ? null : _definition$theme;
+      // console.log('fieldTheme', id, fieldTheme);
 
       // Early return
       if (fieldTheme === null || !isObject(fieldTheme)) {
@@ -1529,6 +1725,7 @@ var ThemeParser = /*#__PURE__*/function () {
       if (isArray(value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
+            // console.log('innerField', innerField);
             // Early return
             if (!isObject(innerField[innerFieldName])) {
               return newInnerField;
@@ -1588,15 +1785,15 @@ var ThemeParser = /*#__PURE__*/function () {
           fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
           _ref4$boxStyle = _ref4.boxStyle,
           fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
-          otherProps = _objectWithoutProperties(_ref4, _excluded$2);
+          otherProps = _objectWithoutProperties(_ref4, _excluded$1);
         if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty(otherProps) && !isObject(fieldTheme)) {
           return value;
         }
         var complexValue = null;
         if (!isEmpty(otherProps)) {
-          complexValue = Object.keys(fieldTheme).reduce(function (newObject, key) {
+          complexValue = Object.keys(otherProps).reduce(function (newObject, key) {
             var innerValue = value !== null ? value[key] || null : null;
-            var newValue = _this3.parseValue(innerValue, fieldTheme[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+            var newValue = _this3.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
             return _objectSpread(_objectSpread({}, newObject), newValue !== null ? _defineProperty({}, key, newValue) : null);
           }, {});
         }
@@ -1626,6 +1823,8 @@ var ThemeParser = /*#__PURE__*/function () {
           boxStyle: _objectSpread(_objectSpread(_objectSpread({}, fieldBoxStyle), fieldThemeComponentBoxStyle), valueBoxStyle || null)
         } : null;
 
+        // console.log('hell', boxStyleValue, complexValue);
+
         // Only change value if something is overrided
         return colorValue !== null || themeValue !== null || textStyleValue !== null || boxStyleValue !== null || complexValue !== null ? _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorValue), themeValue), value), boxStyleValue), textStyleValue), complexValue) : value;
       }
@@ -1635,132 +1834,6 @@ var ThemeParser = /*#__PURE__*/function () {
   return ThemeParser;
 }();
 
-var _excluded$1 = ["fonts"];
-var FontsParser = /*#__PURE__*/function () {
-  function FontsParser(_ref) {
-    var fieldsManager = _ref.fieldsManager,
-      screensManager = _ref.screensManager;
-    _classCallCheck(this, FontsParser);
-    this.fieldsManager = fieldsManager;
-    this.screensManager = screensManager;
-    this.fieldsPatternCache = {};
-  }
-  _createClass(FontsParser, [{
-    key: "getFieldsPatternByScreen",
-    value: function getFieldsPatternByScreen(type) {
-      if (typeof this.fieldsPatternCache[type] === 'undefined') {
-        var _ref2 = this.screensManager.getDefinition(type) || {},
-          _ref2$fields = _ref2.fields,
-          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
-        this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
-      }
-      return this.fieldsPatternCache[type];
-    }
-
-    // Extract fonts
-  }, {
-    key: "parse",
-    value: function parse(story) {
-      var _this = this;
-      if (story === null) {
-        return story;
-      }
-
-      // Extract fonts from screen
-      var _ref3 = story || {},
-        _ref3$theme = _ref3.theme,
-        theme = _ref3$theme === void 0 ? null : _ref3$theme,
-        _ref3$components = _ref3.components,
-        components = _ref3$components === void 0 ? [] : _ref3$components;
-      var fonts = uniq(components.reduce(function (currentFonts, screen) {
-        var type = screen.type;
-        var fieldsPattern = _this.getFieldsPatternByScreen(type);
-        var newFonts = FontsParser.extractFontsWithPaths(screen, fieldsPattern);
-        return newFonts.length > 0 ? [].concat(_toConsumableArray(currentFonts), _toConsumableArray(newFonts)) : currentFonts;
-      }, []), 'name');
-
-      // Extract fonts from theme
-      if (theme !== null) {
-        var _this$parse = this.parse(theme),
-          _this$parse$fonts = _this$parse.fonts,
-          themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
-          newTheme = _objectWithoutProperties(_this$parse, _excluded$1);
-        return fonts.length > 0 || themeFonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
-          theme: newTheme,
-          fonts: uniq([].concat(_toConsumableArray(themeFonts), _toConsumableArray(fonts)), 'name')
-        }) : story;
-      }
-      return fonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
-        fonts: fonts
-      }) : story;
-    }
-  }, {
-    key: "getFieldsPattern",
-    value: function getFieldsPattern(fields) {
-      var _this2 = this;
-      var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      return fields.reduce(function (patterns, field) {
-        var _field$name = field.name,
-          name = _field$name === void 0 ? null : _field$name,
-          _field$type = field.type,
-          type = _field$type === void 0 ? null : _field$type;
-        var path = [namePrefix, name].filter(function (it) {
-          return it !== null;
-        }).join('\\.');
-        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
-
-        // also check settings fields
-        var _fieldDefinition$fiel = fieldDefinition.fields,
-          subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
-          _fieldDefinition$item = fieldDefinition.itemsField,
-          itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
-          _fieldDefinition$sett = fieldDefinition.settings,
-          settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
-        return [].concat(_toConsumableArray(patterns), _toConsumableArray(FontsParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray(_this2.getFieldsPattern(subFields, path)), _toConsumableArray(_this2.getFieldsPattern(settings, path)), _toConsumableArray(itemsField !== null ? _this2.getFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
-      }, []);
-    }
-  }], [{
-    key: "fieldIsFontFamily",
-    value: function fieldIsFontFamily(_ref4) {
-      var _ref4$id = _ref4.id,
-        id = _ref4$id === void 0 ? null : _ref4$id;
-      return id === 'font-family';
-    }
-  }, {
-    key: "valueIsFont",
-    value: function valueIsFont(_ref5) {
-      var _ref5$type = _ref5.type,
-        type = _ref5$type === void 0 ? null : _ref5$type;
-      return type === 'custom' || type === 'google';
-    }
-  }, {
-    key: "extractFontsWithPaths",
-    value: function extractFontsWithPaths(data, patterns) {
-      var keyPrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var dataIsArray = isArray(data);
-      var keys = dataIsArray ? _toConsumableArray(data.keys()) : Object.keys(data);
-      return keys.reduce(function (currentFonts, key) {
-        var path = [keyPrefix, key].filter(function (it) {
-          return it !== null;
-        }).join('.');
-        var patternMatch = patterns.reduce(function (found, pattern) {
-          return found || pattern.test(path);
-        }, false);
-        var value = data[key];
-        var font = null;
-        var subFonts = null;
-        if (patternMatch && isObject(value) && FontsParser.valueIsFont(value)) {
-          font = value;
-        } else if (isObject(value) || isArray(value)) {
-          subFonts = FontsParser.extractFontsWithPaths(value, patterns, path);
-        }
-        return subFonts !== null || font !== null ? [].concat(_toConsumableArray(currentFonts), _toConsumableArray(subFonts || []), _toConsumableArray(font !== null ? [font] : [])) : currentFonts;
-      }, []);
-    }
-  }]);
-  return FontsParser;
-}();
-
 var StoryParser = /*#__PURE__*/function () {
   function StoryParser(_ref) {
     var screensManager = _ref.screensManager,
@@ -1777,6 +1850,10 @@ var StoryParser = /*#__PURE__*/function () {
       screensManager: screensManager,
       fieldsManager: fieldsManager
     });
+    this.migrationsParser = new MigrationsParser({
+      screensManager: screensManager,
+      fieldsManager: fieldsManager
+    });
   }
   _createClass(StoryParser, [{
     key: "parse",
@@ -1788,7 +1865,9 @@ var StoryParser = /*#__PURE__*/function () {
         _ref2$withMedias = _ref2.withMedias,
         withMedias = _ref2$withMedias === void 0 ? true : _ref2$withMedias,
         _ref2$withFonts = _ref2.withFonts,
-        withFonts = _ref2$withFonts === void 0 ? true : _ref2$withFonts;
+        withFonts = _ref2$withFonts === void 0 ? true : _ref2$withFonts,
+        _ref2$withMigrations = _ref2.withMigrations,
+        withMigrations = _ref2$withMigrations === void 0 ? true : _ref2$withMigrations;
       if (story === null) {
         return story;
       }
@@ -1798,6 +1877,8 @@ var StoryParser = /*#__PURE__*/function () {
         return _this.themeParser.parse(newStory);
       }], [withFonts, function (newStory) {
         return _this.fontsParser.parse(newStory);
+      }], [withMigrations, function (newStory) {
+        return _this.migrationsParser.parse(newStory);
       }]];
       return parsers.reduce(function (parsedStory, _ref3) {
         var _ref4 = _slicedToArray(_ref3, 2),

package/es/utils.js

@@ -3,7 +3,7 @@ import { paramCase } from 'param-case';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import isObject from 'lodash/isObject';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import isString from 'lodash/isString';
 import tinycolor from 'tinycolor2';
 import { pascalCase, paramCase as paramCase$1, snakeCase } from 'change-case';
@@ -393,6 +393,40 @@ var getFontFamily = function getFontFamily(value) {
   }).join(', ');
 };
 
+var _excluded$1 = ["isPreview", "isView", "current", "openWebView", "enableInteraction", "disableInteraction"];
+var getFooterProps = function getFooterProps() {
+  var footer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$isPreview = _ref.isPreview,
+    isPreview = _ref$isPreview === void 0 ? false : _ref$isPreview,
+    _ref$isView = _ref.isView,
+    isView = _ref$isView === void 0 ? false : _ref$isView,
+    _ref$current = _ref.current,
+    current = _ref$current === void 0 ? false : _ref$current,
+    _ref$openWebView = _ref.openWebView,
+    openWebView = _ref$openWebView === void 0 ? false : _ref$openWebView,
+    _ref$enableInteractio = _ref.enableInteraction,
+    enableInteraction = _ref$enableInteractio === void 0 ? true : _ref$enableInteractio,
+    _ref$disableInteracti = _ref.disableInteraction,
+    disableInteraction = _ref$disableInteracti === void 0 ? false : _ref$disableInteracti,
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _ref2 = footer || {},
+    _ref2$callToAction = _ref2.callToAction,
+    callToAction = _ref2$callToAction === void 0 ? null : _ref2$callToAction;
+  var footerProps = useMemo(function () {
+    return {
+      callToAction: _objectSpread(_objectSpread({}, callToAction), {}, {
+        animationDisabled: isPreview,
+        focusable: current && isView,
+        openWebView: openWebView,
+        enableInteraction: enableInteraction,
+        disableInteraction: disableInteraction
+      }, otherProps)
+    };
+  }, [callToAction, isPreview, isView, current, enableInteraction, disableInteraction, otherProps]);
+  return footerProps;
+};
+
 var getGridLayoutName = function getGridLayoutName(layout) {
   return layout.map(function (it) {
     return "".concat(it.rows, "_").concat(it.columns.join('_'));
@@ -912,6 +946,38 @@ var getLayoutParts = function getLayoutParts() {
   };
 };
 
+var isHeaderFilled = function isHeaderFilled() {
+  var header = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = header || {},
+    _ref$badge = _ref.badge,
+    badge = _ref$badge === void 0 ? null : _ref$badge;
+  var _ref2 = badge || {},
+    _ref2$active = _ref2.active,
+    badgeActive = _ref2$active === void 0 ? false : _ref2$active,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? null : _ref2$label;
+  var _ref3 = label || {},
+    _ref3$body = _ref3.body,
+    body = _ref3$body === void 0 ? null : _ref3$body;
+  return badgeActive && body !== null;
+};
+
+var isFooterFilled = function isFooterFilled() {
+  var footer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = footer || {},
+    _ref$callToAction = _ref.callToAction,
+    callToAction = _ref$callToAction === void 0 ? null : _ref$callToAction;
+  var _ref2 = callToAction || {},
+    _ref2$active = _ref2.active,
+    callToActionActive = _ref2$active === void 0 ? false : _ref2$active,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? null : _ref2$label;
+  var _ref3 = label || {},
+    _ref3$body = _ref3.body,
+    body = _ref3$body === void 0 ? null : _ref3$body;
+  return callToActionActive && body !== null;
+};
+
 var isMessage = function isMessage(message) {
   return isObject(message) && typeof message.defaultMessage !== 'undefined';
 };
@@ -1043,4 +1109,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromAlignment, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getFooterProps, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromAlignment, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isFooterFilled, isHeaderFilled, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -1333,8 +1333,9 @@ var Dropdown = function Dropdown(_ref) {
         onClickItem(e);
       }
     } : null;
-    return ItemComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ItemComponent, Object.assign({
-      key: "item-".concat(index, "-").concat(label, "-").concat(type),
+    return ItemComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+      key: "item-".concat(index, "-").concat(label, "-").concat(type)
+    }, /*#__PURE__*/React__default["default"].createElement(ItemComponent, Object.assign({
       className: classNames__default["default"]([(_ref3 = {
         'dropdown-item': type === 'link' || type === 'button',
         'dropdown-divider': type === 'divider',
@@ -3142,6 +3143,10 @@ PropTypes__default["default"].shape({
   id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   name: PropTypes__default["default"].string
 });
+PropTypes__default["default"].shape({
+  label: textElement,
+  buttonStyle: boxStyle
+});
 
 /* eslint-disable react/no-array-index-key */
 var propTypes$d = {

package/lib/hooks.js

@@ -1637,7 +1637,9 @@ var useParsedStory = function useParsedStory(story) {
     _ref$withMedias = _ref.withMedias,
     withMedias = _ref$withMedias === void 0 ? true : _ref$withMedias,
     _ref$withFonts = _ref.withFonts,
-    withFonts = _ref$withFonts === void 0 ? true : _ref$withFonts;
+    withFonts = _ref$withFonts === void 0 ? true : _ref$withFonts,
+    _ref$withMigrations = _ref.withMigrations,
+    withMigrations = _ref$withMigrations === void 0 ? true : _ref$withMigrations;
   var screensManager = contexts.useScreensManager();
   var fieldsManager = contexts.useFieldsManager();
   var parser = react.useMemo(function () {
@@ -1653,7 +1655,8 @@ var useParsedStory = function useParsedStory(story) {
     return parser.parse(story, {
       withMedias: withMedias,
       withTheme: withTheme,
-      withFonts: withFonts
+      withFonts: withFonts,
+      withMigrations: withMigrations
     });
   }, [parser, disabled, withMedias, withTheme, withFonts, story]);
   return newStory;

package/lib/index.js

@@ -29,8 +29,8 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 require('slugify');
 var uniqBy = require('lodash/uniqBy');
 var _typeof = require('@babel/runtime/helpers/typeof');
-var isEmpty = require('lodash/isEmpty');
 var uniq = require('lodash/uniq');
+var isEmpty = require('lodash/isEmpty');
 var tracking = require('@folklore/tracking');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -53,8 +53,8 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
-var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
+var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 
 /**
  * Core
@@ -632,6 +632,10 @@ var visitor = PropTypes__default["default"].shape({
   id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   name: PropTypes__default["default"].string
 });
+var badge = PropTypes__default["default"].shape({
+  label: textElement,
+  buttonStyle: boxStyle
+});
 
 var PropTypes = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -776,7 +780,8 @@ var PropTypes = /*#__PURE__*/Object.freeze({
     paymentItems: paymentItems,
     pageMetadata: pageMetadata,
     authorElement: authorElement,
-    visitor: visitor
+    visitor: visitor,
+    badge: badge
 });
 
 var sortedColors = function sortedColors(colors) {
@@ -1164,7 +1169,7 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   return FieldsManager;
 }(DefinitionsManager);
 
-var _excluded$3 = ["medias"];
+var _excluded$4 = ["medias"];
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -1220,7 +1225,7 @@ var MediasParser = /*#__PURE__*/function () {
       if (theme !== null) {
         var _this$toPath = this.toPath(theme),
           themeMedias = _this$toPath.medias,
-          newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$3);
+          newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$4);
         return medias !== null || themeMedias !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
           theme: newTheme,
           components: newComponents,
@@ -1452,7 +1457,197 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
   return ScreensManager;
 }(DefinitionsManager);
 
-var _excluded$2 = ["textStyle", "color", "boxStyle"];
+var _excluded$3 = ["fonts"];
+var FontsParser = /*#__PURE__*/function () {
+  function FontsParser(_ref) {
+    var fieldsManager = _ref.fieldsManager,
+      screensManager = _ref.screensManager;
+    _classCallCheck__default["default"](this, FontsParser);
+    this.fieldsManager = fieldsManager;
+    this.screensManager = screensManager;
+    this.fieldsPatternCache = {};
+  }
+  _createClass__default["default"](FontsParser, [{
+    key: "getFieldsPatternByScreen",
+    value: function getFieldsPatternByScreen(type) {
+      if (typeof this.fieldsPatternCache[type] === 'undefined') {
+        var _ref2 = this.screensManager.getDefinition(type) || {},
+          _ref2$fields = _ref2.fields,
+          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
+        this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
+      }
+      return this.fieldsPatternCache[type];
+    }
+
+    // Extract fonts
+  }, {
+    key: "parse",
+    value: function parse(story) {
+      var _this = this;
+      if (story === null) {
+        return story;
+      }
+
+      // Extract fonts from screen
+      var _ref3 = story || {},
+        _ref3$theme = _ref3.theme,
+        theme = _ref3$theme === void 0 ? null : _ref3$theme,
+        _ref3$components = _ref3.components,
+        components = _ref3$components === void 0 ? [] : _ref3$components;
+      var fonts = uniq__default["default"](components.reduce(function (currentFonts, screen) {
+        var type = screen.type;
+        var fieldsPattern = _this.getFieldsPatternByScreen(type);
+        var newFonts = FontsParser.extractFontsWithPaths(screen, fieldsPattern);
+        return newFonts.length > 0 ? [].concat(_toConsumableArray__default["default"](currentFonts), _toConsumableArray__default["default"](newFonts)) : currentFonts;
+      }, []), 'name');
+
+      // Extract fonts from theme
+      if (theme !== null) {
+        var _this$parse = this.parse(theme),
+          _this$parse$fonts = _this$parse.fonts,
+          themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
+          newTheme = _objectWithoutProperties__default["default"](_this$parse, _excluded$3);
+        return fonts.length > 0 || themeFonts.length > 0 ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
+          theme: newTheme,
+          fonts: uniq__default["default"]([].concat(_toConsumableArray__default["default"](themeFonts), _toConsumableArray__default["default"](fonts)), 'name')
+        }) : story;
+      }
+      return fonts.length > 0 ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
+        fonts: fonts
+      }) : story;
+    }
+  }, {
+    key: "getFieldsPattern",
+    value: function getFieldsPattern(fields) {
+      var _this2 = this;
+      var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      return fields.reduce(function (patterns, field) {
+        var _field$name = field.name,
+          name = _field$name === void 0 ? null : _field$name,
+          _field$type = field.type,
+          type = _field$type === void 0 ? null : _field$type;
+        var path = [namePrefix, name].filter(function (it) {
+          return it !== null;
+        }).join('\\.');
+        var fieldDefinition = _objectSpread__default["default"](_objectSpread__default["default"]({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
+
+        // also check settings fields
+        var _fieldDefinition$fiel = fieldDefinition.fields,
+          subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
+          _fieldDefinition$item = fieldDefinition.itemsField,
+          itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
+          _fieldDefinition$sett = fieldDefinition.settings,
+          settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
+        return [].concat(_toConsumableArray__default["default"](patterns), _toConsumableArray__default["default"](FontsParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray__default["default"](_this2.getFieldsPattern(subFields, path)), _toConsumableArray__default["default"](_this2.getFieldsPattern(settings, path)), _toConsumableArray__default["default"](itemsField !== null ? _this2.getFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
+      }, []);
+    }
+  }], [{
+    key: "fieldIsFontFamily",
+    value: function fieldIsFontFamily(_ref4) {
+      var _ref4$id = _ref4.id,
+        id = _ref4$id === void 0 ? null : _ref4$id;
+      return id === 'font-family';
+    }
+  }, {
+    key: "valueIsFont",
+    value: function valueIsFont(_ref5) {
+      var _ref5$type = _ref5.type,
+        type = _ref5$type === void 0 ? null : _ref5$type;
+      return type === 'custom' || type === 'google';
+    }
+  }, {
+    key: "extractFontsWithPaths",
+    value: function extractFontsWithPaths(data, patterns) {
+      var keyPrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      var dataIsArray = isArray__default["default"](data);
+      var keys = dataIsArray ? _toConsumableArray__default["default"](data.keys()) : Object.keys(data);
+      return keys.reduce(function (currentFonts, key) {
+        var path = [keyPrefix, key].filter(function (it) {
+          return it !== null;
+        }).join('.');
+        var patternMatch = patterns.reduce(function (found, pattern) {
+          return found || pattern.test(path);
+        }, false);
+        var value = data[key];
+        var font = null;
+        var subFonts = null;
+        if (patternMatch && isObject__default["default"](value) && FontsParser.valueIsFont(value)) {
+          font = value;
+        } else if (isObject__default["default"](value) || isArray__default["default"](value)) {
+          subFonts = FontsParser.extractFontsWithPaths(value, patterns, path);
+        }
+        return subFonts !== null || font !== null ? [].concat(_toConsumableArray__default["default"](currentFonts), _toConsumableArray__default["default"](subFonts || []), _toConsumableArray__default["default"](font !== null ? [font] : [])) : currentFonts;
+      }, []);
+    }
+  }]);
+  return FontsParser;
+}();
+
+var _excluded$2 = ["components"],
+  _excluded2$1 = ["shareIncentive", "callToAction"];
+var MigrationsParser = /*#__PURE__*/function () {
+  function MigrationsParser(_ref) {
+    var fieldsManager = _ref.fieldsManager,
+      screensManager = _ref.screensManager;
+    _classCallCheck__default["default"](this, MigrationsParser);
+    this.fieldsManager = fieldsManager;
+    this.screensManager = screensManager;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _createClass__default["default"](MigrationsParser, [{
+    key: "parse",
+    value: function parse(story) {
+      if (story === null) {
+        return story;
+      }
+      var _ref2 = story || {},
+        _ref2$components = _ref2.components,
+        components = _ref2$components === void 0 ? [] : _ref2$components,
+        restStory = _objectWithoutProperties__default["default"](_ref2, _excluded$2);
+      var finalComponents = components.reduce(function (currentComponents, screen) {
+        var _ref3 = screen || {},
+          _ref3$shareIncentive = _ref3.shareIncentive,
+          shareIncentive = _ref3$shareIncentive === void 0 ? null : _ref3$shareIncentive,
+          _ref3$callToAction = _ref3.callToAction,
+          callToAction = _ref3$callToAction === void 0 ? null : _ref3$callToAction,
+          restScreen = _objectWithoutProperties__default["default"](_ref3, _excluded2$1);
+        if (shareIncentive === null && callToAction === null) {
+          return [].concat(_toConsumableArray__default["default"](currentComponents), [restScreen]);
+        }
+        var _ref4 = screen || {},
+          _ref4$header = _ref4.header,
+          header = _ref4$header === void 0 ? null : _ref4$header,
+          _ref4$footer = _ref4.footer,
+          footer = _ref4$footer === void 0 ? null : _ref4$footer;
+
+        // Carful for recursivity here cause same key name
+        var newHeader = shareIncentive !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, shareIncentive !== null ? {
+          shareIncentive: shareIncentive
+        } : null), header !== null ? {
+          header: header
+        } : null) : header;
+        var newFooter = callToAction !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, callToAction !== null ? {
+          callToAction: callToAction
+        } : null), footer !== null ? {
+          footer: footer
+        } : null) : footer;
+        var newScreen = _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, restScreen), newHeader !== null ? {
+          header: newHeader
+        } : null), newFooter !== null ? {
+          footer: newFooter
+        } : null);
+        return [].concat(_toConsumableArray__default["default"](currentComponents), [newScreen]);
+      }, []);
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, restStory), {}, {
+        components: finalComponents
+      });
+    }
+  }]);
+  return MigrationsParser;
+}();
+
+var _excluded$1 = ["textStyle", "color", "boxStyle"];
 var ThemeParser = /*#__PURE__*/function () {
   function ThemeParser(_ref) {
     var screensManager = _ref.screensManager;
@@ -1546,6 +1741,7 @@ var ThemeParser = /*#__PURE__*/function () {
     value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
       var _definition$theme = definition.theme,
         fieldTheme = _definition$theme === void 0 ? null : _definition$theme;
+      // console.log('fieldTheme', id, fieldTheme);
 
       // Early return
       if (fieldTheme === null || !isObject__default["default"](fieldTheme)) {
@@ -1556,6 +1752,7 @@ var ThemeParser = /*#__PURE__*/function () {
       if (isArray__default["default"](value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
+            // console.log('innerField', innerField);
             // Early return
             if (!isObject__default["default"](innerField[innerFieldName])) {
               return newInnerField;
@@ -1615,15 +1812,15 @@ var ThemeParser = /*#__PURE__*/function () {
           fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
           _ref4$boxStyle = _ref4.boxStyle,
           fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
-          otherProps = _objectWithoutProperties__default["default"](_ref4, _excluded$2);
+          otherProps = _objectWithoutProperties__default["default"](_ref4, _excluded$1);
         if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty__default["default"](otherProps) && !isObject__default["default"](fieldTheme)) {
           return value;
         }
         var complexValue = null;
         if (!isEmpty__default["default"](otherProps)) {
-          complexValue = Object.keys(fieldTheme).reduce(function (newObject, key) {
+          complexValue = Object.keys(otherProps).reduce(function (newObject, key) {
             var innerValue = value !== null ? value[key] || null : null;
-            var newValue = _this3.parseValue(innerValue, fieldTheme[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+            var newValue = _this3.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
             return _objectSpread__default["default"](_objectSpread__default["default"]({}, newObject), newValue !== null ? _defineProperty__default["default"]({}, key, newValue) : null);
           }, {});
         }
@@ -1653,6 +1850,8 @@ var ThemeParser = /*#__PURE__*/function () {
           boxStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldBoxStyle), fieldThemeComponentBoxStyle), valueBoxStyle || null)
         } : null;
 
+        // console.log('hell', boxStyleValue, complexValue);
+
         // Only change value if something is overrided
         return colorValue !== null || themeValue !== null || textStyleValue !== null || boxStyleValue !== null || complexValue !== null ? _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), themeValue), value), boxStyleValue), textStyleValue), complexValue) : value;
       }
@@ -1662,132 +1861,6 @@ var ThemeParser = /*#__PURE__*/function () {
   return ThemeParser;
 }();
 
-var _excluded$1 = ["fonts"];
-var FontsParser = /*#__PURE__*/function () {
-  function FontsParser(_ref) {
-    var fieldsManager = _ref.fieldsManager,
-      screensManager = _ref.screensManager;
-    _classCallCheck__default["default"](this, FontsParser);
-    this.fieldsManager = fieldsManager;
-    this.screensManager = screensManager;
-    this.fieldsPatternCache = {};
-  }
-  _createClass__default["default"](FontsParser, [{
-    key: "getFieldsPatternByScreen",
-    value: function getFieldsPatternByScreen(type) {
-      if (typeof this.fieldsPatternCache[type] === 'undefined') {
-        var _ref2 = this.screensManager.getDefinition(type) || {},
-          _ref2$fields = _ref2.fields,
-          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
-        this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
-      }
-      return this.fieldsPatternCache[type];
-    }
-
-    // Extract fonts
-  }, {
-    key: "parse",
-    value: function parse(story) {
-      var _this = this;
-      if (story === null) {
-        return story;
-      }
-
-      // Extract fonts from screen
-      var _ref3 = story || {},
-        _ref3$theme = _ref3.theme,
-        theme = _ref3$theme === void 0 ? null : _ref3$theme,
-        _ref3$components = _ref3.components,
-        components = _ref3$components === void 0 ? [] : _ref3$components;
-      var fonts = uniq__default["default"](components.reduce(function (currentFonts, screen) {
-        var type = screen.type;
-        var fieldsPattern = _this.getFieldsPatternByScreen(type);
-        var newFonts = FontsParser.extractFontsWithPaths(screen, fieldsPattern);
-        return newFonts.length > 0 ? [].concat(_toConsumableArray__default["default"](currentFonts), _toConsumableArray__default["default"](newFonts)) : currentFonts;
-      }, []), 'name');
-
-      // Extract fonts from theme
-      if (theme !== null) {
-        var _this$parse = this.parse(theme),
-          _this$parse$fonts = _this$parse.fonts,
-          themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
-          newTheme = _objectWithoutProperties__default["default"](_this$parse, _excluded$1);
-        return fonts.length > 0 || themeFonts.length > 0 ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
-          theme: newTheme,
-          fonts: uniq__default["default"]([].concat(_toConsumableArray__default["default"](themeFonts), _toConsumableArray__default["default"](fonts)), 'name')
-        }) : story;
-      }
-      return fonts.length > 0 ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
-        fonts: fonts
-      }) : story;
-    }
-  }, {
-    key: "getFieldsPattern",
-    value: function getFieldsPattern(fields) {
-      var _this2 = this;
-      var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      return fields.reduce(function (patterns, field) {
-        var _field$name = field.name,
-          name = _field$name === void 0 ? null : _field$name,
-          _field$type = field.type,
-          type = _field$type === void 0 ? null : _field$type;
-        var path = [namePrefix, name].filter(function (it) {
-          return it !== null;
-        }).join('\\.');
-        var fieldDefinition = _objectSpread__default["default"](_objectSpread__default["default"]({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
-
-        // also check settings fields
-        var _fieldDefinition$fiel = fieldDefinition.fields,
-          subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
-          _fieldDefinition$item = fieldDefinition.itemsField,
-          itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
-          _fieldDefinition$sett = fieldDefinition.settings,
-          settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
-        return [].concat(_toConsumableArray__default["default"](patterns), _toConsumableArray__default["default"](FontsParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray__default["default"](_this2.getFieldsPattern(subFields, path)), _toConsumableArray__default["default"](_this2.getFieldsPattern(settings, path)), _toConsumableArray__default["default"](itemsField !== null ? _this2.getFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
-      }, []);
-    }
-  }], [{
-    key: "fieldIsFontFamily",
-    value: function fieldIsFontFamily(_ref4) {
-      var _ref4$id = _ref4.id,
-        id = _ref4$id === void 0 ? null : _ref4$id;
-      return id === 'font-family';
-    }
-  }, {
-    key: "valueIsFont",
-    value: function valueIsFont(_ref5) {
-      var _ref5$type = _ref5.type,
-        type = _ref5$type === void 0 ? null : _ref5$type;
-      return type === 'custom' || type === 'google';
-    }
-  }, {
-    key: "extractFontsWithPaths",
-    value: function extractFontsWithPaths(data, patterns) {
-      var keyPrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var dataIsArray = isArray__default["default"](data);
-      var keys = dataIsArray ? _toConsumableArray__default["default"](data.keys()) : Object.keys(data);
-      return keys.reduce(function (currentFonts, key) {
-        var path = [keyPrefix, key].filter(function (it) {
-          return it !== null;
-        }).join('.');
-        var patternMatch = patterns.reduce(function (found, pattern) {
-          return found || pattern.test(path);
-        }, false);
-        var value = data[key];
-        var font = null;
-        var subFonts = null;
-        if (patternMatch && isObject__default["default"](value) && FontsParser.valueIsFont(value)) {
-          font = value;
-        } else if (isObject__default["default"](value) || isArray__default["default"](value)) {
-          subFonts = FontsParser.extractFontsWithPaths(value, patterns, path);
-        }
-        return subFonts !== null || font !== null ? [].concat(_toConsumableArray__default["default"](currentFonts), _toConsumableArray__default["default"](subFonts || []), _toConsumableArray__default["default"](font !== null ? [font] : [])) : currentFonts;
-      }, []);
-    }
-  }]);
-  return FontsParser;
-}();
-
 var StoryParser = /*#__PURE__*/function () {
   function StoryParser(_ref) {
     var screensManager = _ref.screensManager,
@@ -1804,6 +1877,10 @@ var StoryParser = /*#__PURE__*/function () {
       screensManager: screensManager,
       fieldsManager: fieldsManager
     });
+    this.migrationsParser = new MigrationsParser({
+      screensManager: screensManager,
+      fieldsManager: fieldsManager
+    });
   }
   _createClass__default["default"](StoryParser, [{
     key: "parse",
@@ -1815,7 +1892,9 @@ var StoryParser = /*#__PURE__*/function () {
         _ref2$withMedias = _ref2.withMedias,
         withMedias = _ref2$withMedias === void 0 ? true : _ref2$withMedias,
         _ref2$withFonts = _ref2.withFonts,
-        withFonts = _ref2$withFonts === void 0 ? true : _ref2$withFonts;
+        withFonts = _ref2$withFonts === void 0 ? true : _ref2$withFonts,
+        _ref2$withMigrations = _ref2.withMigrations,
+        withMigrations = _ref2$withMigrations === void 0 ? true : _ref2$withMigrations;
       if (story === null) {
         return story;
       }
@@ -1825,6 +1904,8 @@ var StoryParser = /*#__PURE__*/function () {
         return _this.themeParser.parse(newStory);
       }], [withFonts, function (newStory) {
         return _this.fontsParser.parse(newStory);
+      }], [withMigrations, function (newStory) {
+        return _this.migrationsParser.parse(newStory);
       }]];
       return parsers.reduce(function (parsedStory, _ref3) {
         var _ref4 = _slicedToArray__default["default"](_ref3, 2),

package/lib/utils.js

@@ -412,6 +412,40 @@ var getFontFamily = function getFontFamily(value) {
   }).join(', ');
 };
 
+var _excluded$1 = ["isPreview", "isView", "current", "openWebView", "enableInteraction", "disableInteraction"];
+var getFooterProps = function getFooterProps() {
+  var footer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$isPreview = _ref.isPreview,
+    isPreview = _ref$isPreview === void 0 ? false : _ref$isPreview,
+    _ref$isView = _ref.isView,
+    isView = _ref$isView === void 0 ? false : _ref$isView,
+    _ref$current = _ref.current,
+    current = _ref$current === void 0 ? false : _ref$current,
+    _ref$openWebView = _ref.openWebView,
+    openWebView = _ref$openWebView === void 0 ? false : _ref$openWebView,
+    _ref$enableInteractio = _ref.enableInteraction,
+    enableInteraction = _ref$enableInteractio === void 0 ? true : _ref$enableInteractio,
+    _ref$disableInteracti = _ref.disableInteraction,
+    disableInteraction = _ref$disableInteracti === void 0 ? false : _ref$disableInteracti,
+    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+  var _ref2 = footer || {},
+    _ref2$callToAction = _ref2.callToAction,
+    callToAction = _ref2$callToAction === void 0 ? null : _ref2$callToAction;
+  var footerProps = react.useMemo(function () {
+    return {
+      callToAction: _objectSpread__default["default"](_objectSpread__default["default"]({}, callToAction), {}, {
+        animationDisabled: isPreview,
+        focusable: current && isView,
+        openWebView: openWebView,
+        enableInteraction: enableInteraction,
+        disableInteraction: disableInteraction
+      }, otherProps)
+    };
+  }, [callToAction, isPreview, isView, current, enableInteraction, disableInteraction, otherProps]);
+  return footerProps;
+};
+
 var getGridLayoutName = function getGridLayoutName(layout) {
   return layout.map(function (it) {
     return "".concat(it.rows, "_").concat(it.columns.join('_'));
@@ -931,6 +965,38 @@ var getLayoutParts = function getLayoutParts() {
   };
 };
 
+var isHeaderFilled = function isHeaderFilled() {
+  var header = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = header || {},
+    _ref$badge = _ref.badge,
+    badge = _ref$badge === void 0 ? null : _ref$badge;
+  var _ref2 = badge || {},
+    _ref2$active = _ref2.active,
+    badgeActive = _ref2$active === void 0 ? false : _ref2$active,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? null : _ref2$label;
+  var _ref3 = label || {},
+    _ref3$body = _ref3.body,
+    body = _ref3$body === void 0 ? null : _ref3$body;
+  return badgeActive && body !== null;
+};
+
+var isFooterFilled = function isFooterFilled() {
+  var footer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = footer || {},
+    _ref$callToAction = _ref.callToAction,
+    callToAction = _ref$callToAction === void 0 ? null : _ref$callToAction;
+  var _ref2 = callToAction || {},
+    _ref2$active = _ref2.active,
+    callToActionActive = _ref2$active === void 0 ? false : _ref2$active,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? null : _ref2$label;
+  var _ref3 = label || {},
+    _ref3$body = _ref3.body,
+    body = _ref3$body === void 0 ? null : _ref3$body;
+  return callToActionActive && body !== null;
+};
+
 var isMessage = function isMessage(message) {
   return isObject__default["default"](message) && typeof message.defaultMessage !== 'undefined';
 };
@@ -1084,6 +1150,7 @@ exports.getFieldByName = getFieldByName;
 exports.getFieldFromPath = getFieldFromPath;
 exports.getFileName = getFileName;
 exports.getFontFamilyFromFont = getFontFamily;
+exports.getFooterProps = getFooterProps;
 exports.getGridLayoutName = getGridLayoutName;
 exports.getLargestRemainderRound = largestRemainderRound;
 exports.getLayersFromBackground = getLayersFromBackground;
@@ -1104,6 +1171,8 @@ exports.getStyleFromLink = getStyleFromLink;
 exports.getStyleFromMargin = getStyleFromMargin;
 exports.getStyleFromText = getStyleFromText;
 exports.getVideoSupportedMimes = getVideoSupportedMimes;
+exports.isFooterFilled = isFooterFilled;
+exports.isHeaderFilled = isHeaderFilled;
 exports.isImageFilled = isImageFilled;
 exports.isIos = isIos;
 exports.isLabelFilled = isTextFilled$1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.348",
+    "version": "0.3.359",
     "description": "",
     "keywords": [
         "javascript"
@@ -133,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "20ef008fdf5c678004b740f395f51cb548591dad"
+    "gitHead": "22eba0d01f18f8971e0405bbb41081b5e2ae80ee"
 }