@newskit-render/standalone-components 2.0.1 → 2.1.0

package/dist/cjs/article-recommendations/components/AdPlaceholder.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var newskit_1 = require("newskit");
+var AdContainer = newskit_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  width: 100%;\n  min-height: max-content;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  ", "\n  width: 100%;\n  min-height: max-content;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+    var height = _a.height, maxWidth = _a.maxWidth;
+    return "height: ".concat(height || 'auto', ";\n    max-width: ").concat(maxWidth || '100%', ";");
+});
+var AdPlaceHolder = function (_a) {
+    var id = _a.id, height = _a.height, maxWidth = _a.maxWidth, className = _a.className, dataAdLabel = _a.dataAdLabel;
+    return (react_1.default.createElement(newskit_1.Block, { "data-testid": "ad-".concat(id) },
+        react_1.default.createElement(AdContainer, { id: id, height: height, maxWidth: maxWidth, className: className, "data-ad-label": dataAdLabel })));
+};
+exports.default = AdPlaceHolder;
+var templateObject_1;
+//# sourceMappingURL=AdPlaceholder.js.map

package/dist/cjs/article-recommendations/components/AdPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdPlaceholder.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/AdPlaceholder.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,gDAAyB;AACzB,mCAAuC;AAOvC,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,oNAAgB,MAC1C,EAEkC,yIAOrC,KATG,UAAC,EAAoB;QAAlB,MAAM,YAAA,EAAE,QAAQ,cAAA;IACnB,OAAA,kBAAW,MAAM,IAAI,MAAM,+BACd,QAAQ,IAAI,MAAM,MAAG;AADlC,CACkC,CAOrC,CAAA;AAED,IAAM,aAAa,GAMd,UAAC,EAAgD;QAA9C,EAAE,QAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,WAAW,iBAAA;IAAO,OAAA,CACzD,8BAAC,eAAK,mBAAc,aAAM,EAAE,CAAE;QAC5B,8BAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,mBACL,WAAW,GAC1B,CACI,CACT;AAV0D,CAU1D,CAAA;AAED,kBAAe,aAAa,CAAA"}

package/dist/cjs/article-recommendations/components/ArticleGrid.js

@@ -18,9 +18,19 @@ var helpers_1 = require("../helpers");
 var newskit_1 = require("newskit");
 var react_1 = __importDefault(require("react"));
 var ArticleRecommendation_1 = __importDefault(require("./ArticleRecommendation"));
+var AdPlaceholder_1 = __importDefault(require("./AdPlaceholder"));
 var AricleGrid = function (_a) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.columnCount, columnCount = _c === void 0 ? '1' : _c, articles = _a.articles, _d = _a.size, size = _d === void 0 ? 'large' : _d;
-    return (react_1.default.createElement(newskit_1.GridLayout, __assign({ columns: (0, helpers_1.transformColumns)(columnCount), rowGap: { xs: 'space010', md: 'space040' }, columnGap: { md: 'space030', lg: 'space050' } }, overrides), articles.map(function (article, i) { return (react_1.default.createElement(ArticleRecommendation_1.default, { article: article, size: size, key: i })); })));
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.columnCount, columnCount = _c === void 0 ? '1' : _c, articles = _a.articles, _d = _a.size, size = _d === void 0 ? 'large' : _d, ads = _a.ads;
+    var renderedAds = 1;
+    return (react_1.default.createElement(newskit_1.GridLayout, __assign({ columns: (0, helpers_1.transformColumns)(columnCount), rowGap: { xs: 'space010', md: 'space040' }, columnGap: { md: 'space030', lg: 'space050' } }, overrides), articles.map(function (article, i) {
+        var isCurrentIndexApplicableForAd = ads && i % ads.articlesMargin === 0;
+        var shouldRenderAd = isCurrentIndexApplicableForAd && renderedAds <= ads.count;
+        renderedAds = shouldRenderAd ? renderedAds + 1 : renderedAds;
+        return (react_1.default.createElement("div", { key: "".concat(article.title, "-").concat(i) },
+            react_1.default.createElement(ArticleRecommendation_1.default, { article: article, size: size, key: i }),
+            shouldRenderAd ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(AdPlaceholder_1.default, { id: "".concat(ads.options.id, "-").concat(i), className: ads.options.className, dataAdLabel: ads.options.dataAdLabel }))) : null));
+    })));
 };
 exports.default = AricleGrid;
 //# sourceMappingURL=ArticleGrid.js.map

package/dist/cjs/article-recommendations/components/ArticleGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleGrid.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,sCAA6C;AAC7C,mCAAoC;AACpC,gDAAyB;AAEzB,kFAA2D;AAE3D,IAAM,UAAU,GAA+B,UAAC,EAK/C;QAJC,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAiB,EAAjB,WAAW,mBAAG,GAAG,KAAA,EACjB,QAAQ,cAAA,EACR,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA;IAEd,OAAO,CACL,8BAAC,oBAAU,aACT,OAAO,EAAE,IAAA,0BAAgB,EAAC,WAAW,CAAC,EACtC,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAC1C,SAAS,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,IACzC,SAAS,GAEZ,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC,IAAK,OAAA,CAC5B,8BAAC,+BAAqB,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,GAAI,CAChE,EAF6B,CAE7B,CAAC,CACS,CACd,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,UAAU,CAAA"}
+{"version":3,"file":"ArticleGrid.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,sCAA6C;AAC7C,mCAAoC;AACpC,gDAAyB;AAEzB,kFAA2D;AAC3D,kEAA2C;AAE3C,IAAM,UAAU,GAA+B,UAAC,EAM/C;QALC,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAiB,EAAjB,WAAW,mBAAG,GAAG,KAAA,EACjB,QAAQ,cAAA,EACR,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,GAAG,SAAA;IAEH,IAAI,WAAW,GAAG,CAAC,CAAA;IACnB,OAAO,CACL,8BAAC,oBAAU,aACT,OAAO,EAAE,IAAA,0BAAgB,EAAC,WAAW,CAAC,EACtC,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAC1C,SAAS,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,IACzC,SAAS,GAEZ,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC;QACvB,IAAM,6BAA6B,GACjC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,cAAc,KAAK,CAAC,CAAA;QACrC,IAAM,cAAc,GAClB,6BAA6B,IAAI,WAAW,IAAI,GAAG,CAAC,KAAK,CAAA;QAE3D,WAAW,GAAG,cAAc,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAA;QAE5D,OAAO,CACL,uCAAK,GAAG,EAAE,UAAG,OAAO,CAAC,KAAK,cAAI,CAAC,CAAE;YAC/B,8BAAC,+BAAqB,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,GAAI;YAC9D,cAAc,CAAC,CAAC,CAAC,CAChB;gBACE,8BAAC,uBAAa,IACZ,EAAE,EAAE,UAAG,GAAG,CAAC,OAAO,CAAC,EAAE,cAAI,CAAC,CAAE,EAC5B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,SAAS,EAChC,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,WAAW,GACpC,CACD,CACJ,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;IACH,CAAC,CAAC,CACS,CACd,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,UAAU,CAAA"}

package/dist/cjs/article-recommendations/components/ArticleRecommendationsProvider.js

@@ -15,9 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var lodash_merge_1 = __importDefault(require("lodash.merge"));
-var context_1 = require("../context");
 var swr_1 = __importDefault(require("swr"));
+var context_1 = require("../context");
 var provider_1 = require("../provider");
 var defaultContext = {
     dpaTemplates: [
@@ -25,41 +24,59 @@ var defaultContext = {
             templateId: 'list-1',
             columnCount: '1',
             size: 'small',
-            recommendedArticles: { totalArticlesCount: 4 },
-            adlibraryMPU: { totalArticlesCount: 0 },
+            recommendedArticlesCount: 4,
+            ads: {
+                count: 3,
+                articlesMargin: 2,
+                options: {
+                    id: 'dynamic-mpu',
+                    className: 'nuk-ad-placeholder',
+                    dataAdLabel: 'dynamicMpus',
+                },
+            },
         },
         {
             templateId: 'list-2',
             columnCount: { xs: '1', sm: '2', lg: '4' },
             size: 'large',
-            recommendedArticles: { totalArticlesCount: 8 },
-            adlibraryMPU: { totalArticlesCount: 0 },
+            recommendedArticlesCount: 15,
+            ads: {
+                count: 4,
+                articlesMargin: 2,
+                options: {
+                    id: 'dynamic-mpu',
+                    className: 'nuk-ad-placeholder',
+                    dataAdLabel: 'dynamicMpus',
+                },
+            },
         },
     ],
 };
-var mapDpaTemplates = function (articles, dpaTemplates) {
-    var articleTypeNames = Object.keys(dpaTemplates[0]).slice(3);
-    return articleTypeNames.reduce(function (acc, articleTypeName) {
-        var startCount = 0;
-        var dpaTemplatesWithArticles = acc.map(function (dpaTemplate) {
-            var _a;
-            var totalArticlesCount = dpaTemplate[articleTypeName].totalArticlesCount;
-            var slicedArticles = articles[articleTypeName].slice(startCount, startCount + totalArticlesCount);
-            startCount += totalArticlesCount;
-            return __assign(__assign({}, dpaTemplate), (_a = {}, _a[articleTypeName] = slicedArticles, _a));
-        });
-        startCount = 0;
-        return dpaTemplatesWithArticles;
-    }, dpaTemplates);
+var addArticlesToDPATemplates = function (articles, dpaTemplates) {
+    var totalArticlesCount = 0;
+    return dpaTemplates.reduce(function (acc, _a) {
+        var templateId = _a.templateId, columnCount = _a.columnCount, size = _a.size, recommendedArticlesCount = _a.recommendedArticlesCount, ads = _a.ads;
+        var currentDPATemplateArticles = articles.slice(totalArticlesCount, totalArticlesCount + recommendedArticlesCount);
+        var templateWithArticles = {
+            templateId: templateId,
+            columnCount: columnCount,
+            size: size,
+            ads: ads,
+            recommendedArticles: currentDPATemplateArticles,
+        };
+        totalArticlesCount += recommendedArticlesCount;
+        acc.push(templateWithArticles);
+        return acc;
+    }, []);
 };
 var ArticleRecommendationsProvider = function (_a) {
     var articleId = _a.articleId, context = _a.context, config = _a.config, children = _a.children;
-    var enhancedContext = (0, lodash_merge_1.default)({}, defaultContext, context);
+    var enhancedContext = context || defaultContext;
     var articles = (0, swr_1.default)([articleId, config], provider_1.fetcher).data;
-    var mapedDpaTemplates = articles
-        ? mapDpaTemplates({ recommendedArticles: articles, adlibraryMPU: [] }, enhancedContext.dpaTemplates)
+    var dpaTemplates = articles
+        ? addArticlesToDPATemplates(articles, enhancedContext.dpaTemplates)
         : [];
-    var contextWithArticles = __assign(__assign({}, enhancedContext), { dpaTemplates: mapedDpaTemplates, articleId: articleId });
+    var contextWithArticles = __assign(__assign({}, enhancedContext), { dpaTemplates: dpaTemplates, articleId: articleId });
     return (react_1.default.createElement(context_1.ArticleRecommendationsProviderContext.Provider, { value: contextWithArticles }, children));
 };
 exports.default = ArticleRecommendationsProvider;

package/dist/cjs/article-recommendations/components/ArticleRecommendationsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleRecommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendationsProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,8DAAgC;AAChC,sCAAkE;AASlE,4CAAwB;AACxB,wCAAqC;AAErC,IAAM,cAAc,GAA8C;IAChE,YAAY,EAAE;QACZ;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,GAAG;YAChB,IAAI,EAAE,OAAO;YACb,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;SACxC;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE;YAC1C,IAAI,EAAE,OAAO;YACb,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;SACxC;KACF;CACF,CAAA;AAED,IAAM,eAAe,GAAG,UACtB,QAAyB,EACzB,YAA2B;IAE3B,IAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC9D,OAAO,gBAAgB,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,eAAe;QAClD,IAAI,UAAU,GAAG,CAAC,CAAA;QAClB,IAAM,wBAAwB,GAA8B,GAAG,CAAC,GAAG,CACjE,UAAC,WAAW;;YACF,IAAA,kBAAkB,GAAK,WAAW,CAAC,eAAe,CAAC,mBAAjC,CAAiC;YAC3D,IAAM,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC,KAAK,CACpD,UAAU,EACV,UAAU,GAAI,kBAA6B,CAC5C,CAAA;YAED,UAAU,IAAI,kBAA4B,CAAA;YAC1C,6BACK,WAAW,gBACb,eAAe,IAAG,cAAc,OAClC;QACH,CAAC,CACF,CAAA;QACD,UAAU,GAAG,CAAC,CAAA;QACd,OAAO,wBAAwB,CAAA;IACjC,CAAC,EAAE,YAAmB,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,IAAM,8BAA8B,GAEhC,UAAC,EAAwC;QAAtC,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA;IACzC,IAAM,eAAe,GAAG,IAAA,sBAAK,EAAC,EAAE,EAAE,cAAc,EAAE,OAAO,CAAC,CAAA;IAClD,IAAM,QAAQ,GAAK,IAAA,aAAM,EAAY,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,kBAAO,CAAC,KAApD,CAAoD;IAE1E,IAAM,iBAAiB,GAAG,QAAQ;QAChC,CAAC,CAAC,eAAe,CACb,EAAE,mBAAmB,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,EACnD,eAAe,CAAC,YAAY,CAC7B;QACH,CAAC,CAAC,EAAE,CAAA;IAEN,IAAM,mBAAmB,yBACpB,eAAe,KAClB,YAAY,EAAE,iBAAiB,EAC/B,SAAS,WAAA,GACV,CAAA;IAED,OAAO,CACL,8BAAC,+CAAqC,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,IACvE,QAAQ,CACsC,CAClD,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,8BAA8B,CAAA"}
+{"version":3,"file":"ArticleRecommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendationsProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,4CAAwB;AACxB,sCAAkE;AAQlE,wCAAqC;AAErC,IAAM,cAAc,GAA8C;IAChE,YAAY,EAAE;QACZ;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,GAAG;YAChB,IAAI,EAAE,OAAO;YACb,wBAAwB,EAAE,CAAC;YAC3B,GAAG,EAAE;gBACH,KAAK,EAAE,CAAC;gBACR,cAAc,EAAE,CAAC;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,aAAa;oBACjB,SAAS,EAAE,oBAAoB;oBAC/B,WAAW,EAAE,aAAa;iBAC3B;aACF;SACF;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE;YAC1C,IAAI,EAAE,OAAO;YACb,wBAAwB,EAAE,EAAE;YAC5B,GAAG,EAAE;gBACH,KAAK,EAAE,CAAC;gBACR,cAAc,EAAE,CAAC;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,aAAa;oBACjB,SAAS,EAAE,oBAAoB;oBAC/B,WAAW,EAAE,aAAa;iBAC3B;aACF;SACF;KACF;CACF,CAAA;AAED,IAAM,yBAAyB,GAAG,UAChC,QAAmB,EACnB,YAA2B;IAE3B,IAAI,kBAAkB,GAAG,CAAC,CAAA;IAC1B,OAAO,YAAY,CAAC,MAAM,CACxB,UACE,GAA8B,EAC9B,EAMc;YALZ,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,wBAAwB,8BAAA,EACxB,GAAG,SAAA;QAGL,IAAM,0BAA0B,GAAG,QAAQ,CAAC,KAAK,CAC/C,kBAAkB,EAClB,kBAAkB,GAAG,wBAAwB,CAC9C,CAAA;QACD,IAAM,oBAAoB,GAA4B;YACpD,UAAU,YAAA;YACV,WAAW,aAAA;YACX,IAAI,MAAA;YACJ,GAAG,KAAA;YACH,mBAAmB,EAAE,0BAA0B;SAChD,CAAA;QAED,kBAAkB,IAAI,wBAAwB,CAAA;QAC9C,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;QAC9B,OAAO,GAAG,CAAA;IACZ,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC,CAAA;AAED,IAAM,8BAA8B,GAEhC,UAAC,EAAwC;QAAtC,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA;IACzC,IAAM,eAAe,GAAG,OAAO,IAAI,cAAc,CAAA;IACzC,IAAM,QAAQ,GAAK,IAAA,aAAM,EAAY,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,kBAAO,CAAC,KAApD,CAAoD;IAE1E,IAAM,YAAY,GAAG,QAAQ;QAC3B,CAAC,CAAC,yBAAyB,CAAC,QAAQ,EAAE,eAAe,CAAC,YAAY,CAAC;QACnE,CAAC,CAAC,EAAE,CAAA;IAEN,IAAM,mBAAmB,yBACpB,eAAe,KAClB,YAAY,cAAA,EACZ,SAAS,WAAA,GACV,CAAA;IAED,OAAO,CACL,8BAAC,+CAAqC,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,IACvE,QAAQ,CACsC,CAClD,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,8BAA8B,CAAA"}

package/dist/cjs/article-recommendations/components/RecommendedArticleList.js

@@ -36,8 +36,8 @@ var RecommendedArticleList = function (_a) {
     if (!dpaTemplate) {
         return null;
     }
-    var recommendedArticles = dpaTemplate.recommendedArticles, columnCount = dpaTemplate.columnCount, size = dpaTemplate.size;
-    return (react_1.default.createElement(ArticleGrid_1.default, { articles: recommendedArticles, columnCount: columnCount, size: size }));
+    var recommendedArticles = dpaTemplate.recommendedArticles, columnCount = dpaTemplate.columnCount, size = dpaTemplate.size, ads = dpaTemplate.ads;
+    return (react_1.default.createElement(ArticleGrid_1.default, { articles: recommendedArticles, columnCount: columnCount, size: size, ads: ads }));
 };
 exports.default = RecommendedArticleList;
 //# sourceMappingURL=RecommendedArticleList.js.map

package/dist/cjs/article-recommendations/components/RecommendedArticleList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendedArticleList.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/RecommendedArticleList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyC;AACzC,8DAAsC;AACtC,sCAAkE;AAGlE,IAAM,sBAAsB,GAAqC,UAAC,EAEjE;QADC,UAAU,gBAAA;IAEV,IAAM,OAAO,GAAG,IAAA,kBAAU,EACxB,+CAAqC,CACmB,CAAA;IAE1D,IAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAC3C,UAAC,WAAW,IAAK,OAAA,WAAW,CAAC,UAAU,KAAK,UAAU,EAArC,CAAqC,CACvD,CAAA;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAEO,IAAA,mBAAmB,GAAwB,WAAW,oBAAnC,EAAE,WAAW,GAAW,WAAW,YAAtB,EAAE,IAAI,GAAK,WAAW,KAAhB,CAAgB;IAC9D,OAAO,CACL,8BAAC,qBAAU,IACT,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,sBAAsB,CAAA"}
+{"version":3,"file":"RecommendedArticleList.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/RecommendedArticleList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyC;AACzC,8DAAsC;AACtC,sCAAkE;AAGlE,IAAM,sBAAsB,GAAqC,UAAC,EAEjE;QADC,UAAU,gBAAA;IAEV,IAAM,OAAO,GAAG,IAAA,kBAAU,EACxB,+CAAqC,CACmB,CAAA;IAE1D,IAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAC3C,UAAC,WAAW,IAAK,OAAA,WAAW,CAAC,UAAU,KAAK,UAAU,EAArC,CAAqC,CACvD,CAAA;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAEO,IAAA,mBAAmB,GAA6B,WAAW,oBAAxC,EAAE,WAAW,GAAgB,WAAW,YAA3B,EAAE,IAAI,GAAU,WAAW,KAArB,EAAE,GAAG,GAAK,WAAW,IAAhB,CAAgB;IACnE,OAAO,CACL,8BAAC,qBAAU,IACT,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,GACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,sBAAsB,CAAA"}

package/dist/cjs/article-recommendations/components/index.d.ts

@@ -1,6 +1,7 @@
+import AdPlaceholder from './AdPlaceholder';
 import AricleGrid from './ArticleGrid';
 import ArticleRecommendation from './ArticleRecommendation';
 import ArticleRecommendationsProvider from './ArticleRecommendationsProvider';
 import RecommendedArticleList from './RecommendedArticleList';
 export * from './baseProps';
-export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, };
+export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, AdPlaceholder, };

package/dist/cjs/article-recommendations/components/index.js

@@ -17,7 +17,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecommendedArticleList = exports.ArticleRecommendationsProvider = exports.AricleGrid = exports.ArticleRecommendation = void 0;
+exports.AdPlaceholder = exports.RecommendedArticleList = exports.ArticleRecommendationsProvider = exports.AricleGrid = exports.ArticleRecommendation = void 0;
+var AdPlaceholder_1 = __importDefault(require("./AdPlaceholder"));
+exports.AdPlaceholder = AdPlaceholder_1.default;
 var ArticleGrid_1 = __importDefault(require("./ArticleGrid"));
 exports.AricleGrid = ArticleGrid_1.default;
 var ArticleRecommendation_1 = __importDefault(require("./ArticleRecommendation"));

package/dist/cjs/article-recommendations/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,8DAAsC;AAQpC,qBARK,qBAAU,CAQL;AAPZ,kFAA2D;AAMzD,gCANK,+BAAqB,CAML;AALvB,oGAA6E;AAO3E,yCAPK,wCAA8B,CAOL;AANhC,oFAA6D;AAO3D,iCAPK,gCAAsB,CAOL;AALxB,8CAA2B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,kEAA2C;AAYzC,wBAZK,uBAAa,CAYL;AAXf,8DAAsC;AAQpC,qBARK,qBAAU,CAQL;AAPZ,kFAA2D;AAMzD,gCANK,+BAAqB,CAML;AALvB,oGAA6E;AAO3E,yCAPK,wCAA8B,CAOL;AANhC,oFAA6D;AAO3D,iCAPK,gCAAsB,CAOL;AALxB,8CAA2B"}

package/dist/cjs/article-recommendations/index.d.ts

@@ -1,4 +1,4 @@
-export * from './components';
+export { ArticleRecommendation, ArticleRecommendationsProvider, RecommendedArticleList, } from './components';
 export * from './provider';
 export * from './types';
 export * from './context';

package/dist/cjs/article-recommendations/index.js

@@ -14,7 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);
+exports.RecommendedArticleList = exports.ArticleRecommendationsProvider = exports.ArticleRecommendation = void 0;
+var components_1 = require("./components");
+Object.defineProperty(exports, "ArticleRecommendation", { enumerable: true, get: function () { return components_1.ArticleRecommendation; } });
+Object.defineProperty(exports, "ArticleRecommendationsProvider", { enumerable: true, get: function () { return components_1.ArticleRecommendationsProvider; } });
+Object.defineProperty(exports, "RecommendedArticleList", { enumerable: true, get: function () { return components_1.RecommendedArticleList; } });
 __exportStar(require("./provider"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./context"), exports);

package/dist/cjs/article-recommendations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,6CAA0B;AAC1B,0CAAuB;AACvB,4CAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAIqB;AAHnB,mHAAA,qBAAqB,OAAA;AACrB,4HAAA,8BAA8B,OAAA;AAC9B,oHAAA,sBAAsB,OAAA;AAExB,6CAA0B;AAC1B,0CAAuB;AACvB,4CAAyB"}

package/dist/cjs/article-recommendations/types/index.d.ts

@@ -14,6 +14,7 @@ export type ArticleGridProps = {
     columnCount?: MQ<string>;
     size?: 'large' | 'small';
     articles: Article[];
+    ads?: AdsType;
 };
 export type ArticleRecommendationProps = {
     article: Article;
@@ -65,16 +66,30 @@ export type ArticleTypeName = 'recommendedArticles' | 'adlibraryMPU';
 export type ArticleTypes = Record<ArticleTypeName, {
     totalArticlesCount: number;
 }>;
-export type DpaTemplate = ArticleTypes & {
+export type DpaTemplate = {
     templateId: string;
     columnCount: MQ<string>;
     size: 'small' | 'large';
+    recommendedArticlesCount: number;
+    ads?: AdsType;
 };
+export interface AdsType {
+    count: number;
+    articlesMargin: number;
+    options: AdsOptions;
+}
+export interface AdsOptions {
+    id: string;
+    className: string;
+    dataAdLabel: string;
+}
 export type DpaTemplateWithArticles = {
     templateId: string;
     columnCount: MQ<string>;
     size: 'small' | 'large';
-} & Record<string, Article[]>;
+    ads?: AdsType;
+    recommendedArticles: Article[];
+};
 export type ArticleRecommendationsProviderBaseContextType = {
     dpaTemplates: DpaTemplate[];
 };

package/dist/cjs/article-recommendations/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":";;;AA2GA,IAAY,cAEX;AAFD,WAAY,cAAc;IACxB,iFAAiE,CAAA;AACnE,CAAC,EAFW,cAAc,GAAd,sBAAc,KAAd,sBAAc,QAEzB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":";;;AA4HA,IAAY,cAEX;AAFD,WAAY,cAAc;IACxB,iFAAiE,CAAA;AACnE,CAAC,EAFW,cAAc,GAAd,sBAAc,KAAd,sBAAc,QAEzB"}

package/dist/esm/article-recommendations/components/AdPlaceholder.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const AdPlaceHolder: React.FC<{
+    id: string;
+    height?: string;
+    maxWidth?: string;
+    className?: string;
+    dataAdLabel?: string;
+}>;
+export default AdPlaceHolder;

package/dist/esm/article-recommendations/components/AdPlaceholder.js

@@ -0,0 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import { styled, Block } from 'newskit';
+var AdContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  width: 100%;\n  min-height: max-content;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  ", "\n  width: 100%;\n  min-height: max-content;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+    var height = _a.height, maxWidth = _a.maxWidth;
+    return "height: ".concat(height || 'auto', ";\n    max-width: ").concat(maxWidth || '100%', ";");
+});
+var AdPlaceHolder = function (_a) {
+    var id = _a.id, height = _a.height, maxWidth = _a.maxWidth, className = _a.className, dataAdLabel = _a.dataAdLabel;
+    return (React.createElement(Block, { "data-testid": "ad-".concat(id) },
+        React.createElement(AdContainer, { id: id, height: height, maxWidth: maxWidth, className: className, "data-ad-label": dataAdLabel })));
+};
+export default AdPlaceHolder;
+var templateObject_1;
+//# sourceMappingURL=AdPlaceholder.js.map

package/dist/esm/article-recommendations/components/AdPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdPlaceholder.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/AdPlaceholder.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOvC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,oNAAgB,MAC1C,EAEkC,yIAOrC,KATG,UAAC,EAAoB;QAAlB,MAAM,YAAA,EAAE,QAAQ,cAAA;IACnB,OAAA,kBAAW,MAAM,IAAI,MAAM,+BACd,QAAQ,IAAI,MAAM,MAAG;AADlC,CACkC,CAOrC,CAAA;AAED,IAAM,aAAa,GAMd,UAAC,EAAgD;QAA9C,EAAE,QAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,WAAW,iBAAA;IAAO,OAAA,CACzD,oBAAC,KAAK,mBAAc,aAAM,EAAE,CAAE;QAC5B,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,mBACL,WAAW,GAC1B,CACI,CACT;AAV0D,CAU1D,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/esm/article-recommendations/components/ArticleGrid.js

@@ -13,9 +13,19 @@ import { transformColumns } from '../helpers';
 import { GridLayout } from 'newskit';
 import React from 'react';
 import ArticleRecommendation from './ArticleRecommendation';
+import AdPlaceholder from './AdPlaceholder';
 var AricleGrid = function (_a) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.columnCount, columnCount = _c === void 0 ? '1' : _c, articles = _a.articles, _d = _a.size, size = _d === void 0 ? 'large' : _d;
-    return (React.createElement(GridLayout, __assign({ columns: transformColumns(columnCount), rowGap: { xs: 'space010', md: 'space040' }, columnGap: { md: 'space030', lg: 'space050' } }, overrides), articles.map(function (article, i) { return (React.createElement(ArticleRecommendation, { article: article, size: size, key: i })); })));
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.columnCount, columnCount = _c === void 0 ? '1' : _c, articles = _a.articles, _d = _a.size, size = _d === void 0 ? 'large' : _d, ads = _a.ads;
+    var renderedAds = 1;
+    return (React.createElement(GridLayout, __assign({ columns: transformColumns(columnCount), rowGap: { xs: 'space010', md: 'space040' }, columnGap: { md: 'space030', lg: 'space050' } }, overrides), articles.map(function (article, i) {
+        var isCurrentIndexApplicableForAd = ads && i % ads.articlesMargin === 0;
+        var shouldRenderAd = isCurrentIndexApplicableForAd && renderedAds <= ads.count;
+        renderedAds = shouldRenderAd ? renderedAds + 1 : renderedAds;
+        return (React.createElement("div", { key: "".concat(article.title, "-").concat(i) },
+            React.createElement(ArticleRecommendation, { article: article, size: size, key: i }),
+            shouldRenderAd ? (React.createElement(React.Fragment, null,
+                React.createElement(AdPlaceholder, { id: "".concat(ads.options.id, "-").concat(i), className: ads.options.className, dataAdLabel: ads.options.dataAdLabel }))) : null));
+    })));
 };
 export default AricleGrid;
 //# sourceMappingURL=ArticleGrid.js.map

package/dist/esm/article-recommendations/components/ArticleGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleGrid.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAE3D,IAAM,UAAU,GAA+B,UAAC,EAK/C;QAJC,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAiB,EAAjB,WAAW,mBAAG,GAAG,KAAA,EACjB,QAAQ,cAAA,EACR,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA;IAEd,OAAO,CACL,oBAAC,UAAU,aACT,OAAO,EAAE,gBAAgB,CAAC,WAAW,CAAC,EACtC,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAC1C,SAAS,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,IACzC,SAAS,GAEZ,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC,IAAK,OAAA,CAC5B,oBAAC,qBAAqB,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,GAAI,CAChE,EAF6B,CAE7B,CAAC,CACS,CACd,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ArticleGrid.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAE3C,IAAM,UAAU,GAA+B,UAAC,EAM/C;QALC,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,mBAAiB,EAAjB,WAAW,mBAAG,GAAG,KAAA,EACjB,QAAQ,cAAA,EACR,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,GAAG,SAAA;IAEH,IAAI,WAAW,GAAG,CAAC,CAAA;IACnB,OAAO,CACL,oBAAC,UAAU,aACT,OAAO,EAAE,gBAAgB,CAAC,WAAW,CAAC,EACtC,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAC1C,SAAS,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,IACzC,SAAS,GAEZ,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC;QACvB,IAAM,6BAA6B,GACjC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,cAAc,KAAK,CAAC,CAAA;QACrC,IAAM,cAAc,GAClB,6BAA6B,IAAI,WAAW,IAAI,GAAG,CAAC,KAAK,CAAA;QAE3D,WAAW,GAAG,cAAc,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAA;QAE5D,OAAO,CACL,6BAAK,GAAG,EAAE,UAAG,OAAO,CAAC,KAAK,cAAI,CAAC,CAAE;YAC/B,oBAAC,qBAAqB,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,GAAI;YAC9D,cAAc,CAAC,CAAC,CAAC,CAChB;gBACE,oBAAC,aAAa,IACZ,EAAE,EAAE,UAAG,GAAG,CAAC,OAAO,CAAC,EAAE,cAAI,CAAC,CAAE,EAC5B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,SAAS,EAChC,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,WAAW,GACpC,CACD,CACJ,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;IACH,CAAC,CAAC,CACS,CACd,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/esm/article-recommendations/components/ArticleRecommendationsProvider.js

@@ -10,9 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import merge from 'lodash.merge';
-import { ArticleRecommendationsProviderContext } from '../context';
 import useSWR from 'swr';
+import { ArticleRecommendationsProviderContext } from '../context';
 import { fetcher } from '../provider';
 var defaultContext = {
     dpaTemplates: [
@@ -20,41 +19,59 @@ var defaultContext = {
             templateId: 'list-1',
             columnCount: '1',
             size: 'small',
-            recommendedArticles: { totalArticlesCount: 4 },
-            adlibraryMPU: { totalArticlesCount: 0 },
+            recommendedArticlesCount: 4,
+            ads: {
+                count: 3,
+                articlesMargin: 2,
+                options: {
+                    id: 'dynamic-mpu',
+                    className: 'nuk-ad-placeholder',
+                    dataAdLabel: 'dynamicMpus',
+                },
+            },
         },
         {
             templateId: 'list-2',
             columnCount: { xs: '1', sm: '2', lg: '4' },
             size: 'large',
-            recommendedArticles: { totalArticlesCount: 8 },
-            adlibraryMPU: { totalArticlesCount: 0 },
+            recommendedArticlesCount: 15,
+            ads: {
+                count: 4,
+                articlesMargin: 2,
+                options: {
+                    id: 'dynamic-mpu',
+                    className: 'nuk-ad-placeholder',
+                    dataAdLabel: 'dynamicMpus',
+                },
+            },
         },
     ],
 };
-var mapDpaTemplates = function (articles, dpaTemplates) {
-    var articleTypeNames = Object.keys(dpaTemplates[0]).slice(3);
-    return articleTypeNames.reduce(function (acc, articleTypeName) {
-        var startCount = 0;
-        var dpaTemplatesWithArticles = acc.map(function (dpaTemplate) {
-            var _a;
-            var totalArticlesCount = dpaTemplate[articleTypeName].totalArticlesCount;
-            var slicedArticles = articles[articleTypeName].slice(startCount, startCount + totalArticlesCount);
-            startCount += totalArticlesCount;
-            return __assign(__assign({}, dpaTemplate), (_a = {}, _a[articleTypeName] = slicedArticles, _a));
-        });
-        startCount = 0;
-        return dpaTemplatesWithArticles;
-    }, dpaTemplates);
+var addArticlesToDPATemplates = function (articles, dpaTemplates) {
+    var totalArticlesCount = 0;
+    return dpaTemplates.reduce(function (acc, _a) {
+        var templateId = _a.templateId, columnCount = _a.columnCount, size = _a.size, recommendedArticlesCount = _a.recommendedArticlesCount, ads = _a.ads;
+        var currentDPATemplateArticles = articles.slice(totalArticlesCount, totalArticlesCount + recommendedArticlesCount);
+        var templateWithArticles = {
+            templateId: templateId,
+            columnCount: columnCount,
+            size: size,
+            ads: ads,
+            recommendedArticles: currentDPATemplateArticles,
+        };
+        totalArticlesCount += recommendedArticlesCount;
+        acc.push(templateWithArticles);
+        return acc;
+    }, []);
 };
 var ArticleRecommendationsProvider = function (_a) {
     var articleId = _a.articleId, context = _a.context, config = _a.config, children = _a.children;
-    var enhancedContext = merge({}, defaultContext, context);
+    var enhancedContext = context || defaultContext;
     var articles = useSWR([articleId, config], fetcher).data;
-    var mapedDpaTemplates = articles
-        ? mapDpaTemplates({ recommendedArticles: articles, adlibraryMPU: [] }, enhancedContext.dpaTemplates)
+    var dpaTemplates = articles
+        ? addArticlesToDPATemplates(articles, enhancedContext.dpaTemplates)
         : [];
-    var contextWithArticles = __assign(__assign({}, enhancedContext), { dpaTemplates: mapedDpaTemplates, articleId: articleId });
+    var contextWithArticles = __assign(__assign({}, enhancedContext), { dpaTemplates: dpaTemplates, articleId: articleId });
     return (React.createElement(ArticleRecommendationsProviderContext.Provider, { value: contextWithArticles }, children));
 };
 export default ArticleRecommendationsProvider;

package/dist/esm/article-recommendations/components/ArticleRecommendationsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleRecommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendationsProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,cAAc,CAAA;AAChC,OAAO,EAAE,qCAAqC,EAAE,MAAM,YAAY,CAAA;AASlE,OAAO,MAAM,MAAM,KAAK,CAAA;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,IAAM,cAAc,GAA8C;IAChE,YAAY,EAAE;QACZ;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,GAAG;YAChB,IAAI,EAAE,OAAO;YACb,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;SACxC;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE;YAC1C,IAAI,EAAE,OAAO;YACb,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;SACxC;KACF;CACF,CAAA;AAED,IAAM,eAAe,GAAG,UACtB,QAAyB,EACzB,YAA2B;IAE3B,IAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC9D,OAAO,gBAAgB,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,eAAe;QAClD,IAAI,UAAU,GAAG,CAAC,CAAA;QAClB,IAAM,wBAAwB,GAA8B,GAAG,CAAC,GAAG,CACjE,UAAC,WAAW;;YACF,IAAA,kBAAkB,GAAK,WAAW,CAAC,eAAe,CAAC,mBAAjC,CAAiC;YAC3D,IAAM,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC,KAAK,CACpD,UAAU,EACV,UAAU,GAAI,kBAA6B,CAC5C,CAAA;YAED,UAAU,IAAI,kBAA4B,CAAA;YAC1C,6BACK,WAAW,gBACb,eAAe,IAAG,cAAc,OAClC;QACH,CAAC,CACF,CAAA;QACD,UAAU,GAAG,CAAC,CAAA;QACd,OAAO,wBAAwB,CAAA;IACjC,CAAC,EAAE,YAAmB,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,IAAM,8BAA8B,GAEhC,UAAC,EAAwC;QAAtC,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA;IACzC,IAAM,eAAe,GAAG,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,OAAO,CAAC,CAAA;IAClD,IAAM,QAAQ,GAAK,MAAM,CAAY,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,KAApD,CAAoD;IAE1E,IAAM,iBAAiB,GAAG,QAAQ;QAChC,CAAC,CAAC,eAAe,CACb,EAAE,mBAAmB,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,EACnD,eAAe,CAAC,YAAY,CAC7B;QACH,CAAC,CAAC,EAAE,CAAA;IAEN,IAAM,mBAAmB,yBACpB,eAAe,KAClB,YAAY,EAAE,iBAAiB,EAC/B,SAAS,WAAA,GACV,CAAA;IAED,OAAO,CACL,oBAAC,qCAAqC,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,IACvE,QAAQ,CACsC,CAClD,CAAA;AACH,CAAC,CAAA;AAED,eAAe,8BAA8B,CAAA"}
+{"version":3,"file":"ArticleRecommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendationsProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,KAAK,CAAA;AACxB,OAAO,EAAE,qCAAqC,EAAE,MAAM,YAAY,CAAA;AAQlE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,IAAM,cAAc,GAA8C;IAChE,YAAY,EAAE;QACZ;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,GAAG;YAChB,IAAI,EAAE,OAAO;YACb,wBAAwB,EAAE,CAAC;YAC3B,GAAG,EAAE;gBACH,KAAK,EAAE,CAAC;gBACR,cAAc,EAAE,CAAC;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,aAAa;oBACjB,SAAS,EAAE,oBAAoB;oBAC/B,WAAW,EAAE,aAAa;iBAC3B;aACF;SACF;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE;YAC1C,IAAI,EAAE,OAAO;YACb,wBAAwB,EAAE,EAAE;YAC5B,GAAG,EAAE;gBACH,KAAK,EAAE,CAAC;gBACR,cAAc,EAAE,CAAC;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,aAAa;oBACjB,SAAS,EAAE,oBAAoB;oBAC/B,WAAW,EAAE,aAAa;iBAC3B;aACF;SACF;KACF;CACF,CAAA;AAED,IAAM,yBAAyB,GAAG,UAChC,QAAmB,EACnB,YAA2B;IAE3B,IAAI,kBAAkB,GAAG,CAAC,CAAA;IAC1B,OAAO,YAAY,CAAC,MAAM,CACxB,UACE,GAA8B,EAC9B,EAMc;YALZ,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,wBAAwB,8BAAA,EACxB,GAAG,SAAA;QAGL,IAAM,0BAA0B,GAAG,QAAQ,CAAC,KAAK,CAC/C,kBAAkB,EAClB,kBAAkB,GAAG,wBAAwB,CAC9C,CAAA;QACD,IAAM,oBAAoB,GAA4B;YACpD,UAAU,YAAA;YACV,WAAW,aAAA;YACX,IAAI,MAAA;YACJ,GAAG,KAAA;YACH,mBAAmB,EAAE,0BAA0B;SAChD,CAAA;QAED,kBAAkB,IAAI,wBAAwB,CAAA;QAC9C,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;QAC9B,OAAO,GAAG,CAAA;IACZ,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC,CAAA;AAED,IAAM,8BAA8B,GAEhC,UAAC,EAAwC;QAAtC,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA;IACzC,IAAM,eAAe,GAAG,OAAO,IAAI,cAAc,CAAA;IACzC,IAAM,QAAQ,GAAK,MAAM,CAAY,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,KAApD,CAAoD;IAE1E,IAAM,YAAY,GAAG,QAAQ;QAC3B,CAAC,CAAC,yBAAyB,CAAC,QAAQ,EAAE,eAAe,CAAC,YAAY,CAAC;QACnE,CAAC,CAAC,EAAE,CAAA;IAEN,IAAM,mBAAmB,yBACpB,eAAe,KAClB,YAAY,cAAA,EACZ,SAAS,WAAA,GACV,CAAA;IAED,OAAO,CACL,oBAAC,qCAAqC,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,IACvE,QAAQ,CACsC,CAClD,CAAA;AACH,CAAC,CAAA;AAED,eAAe,8BAA8B,CAAA"}

package/dist/esm/article-recommendations/components/RecommendedArticleList.js

@@ -8,8 +8,8 @@ var RecommendedArticleList = function (_a) {
     if (!dpaTemplate) {
         return null;
     }
-    var recommendedArticles = dpaTemplate.recommendedArticles, columnCount = dpaTemplate.columnCount, size = dpaTemplate.size;
-    return (React.createElement(AricleGrid, { articles: recommendedArticles, columnCount: columnCount, size: size }));
+    var recommendedArticles = dpaTemplate.recommendedArticles, columnCount = dpaTemplate.columnCount, size = dpaTemplate.size, ads = dpaTemplate.ads;
+    return (React.createElement(AricleGrid, { articles: recommendedArticles, columnCount: columnCount, size: size, ads: ads }));
 };
 export default RecommendedArticleList;
 //# sourceMappingURL=RecommendedArticleList.js.map

package/dist/esm/article-recommendations/components/RecommendedArticleList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendedArticleList.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/RecommendedArticleList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,qCAAqC,EAAE,MAAM,YAAY,CAAA;AAGlE,IAAM,sBAAsB,GAAqC,UAAC,EAEjE;QADC,UAAU,gBAAA;IAEV,IAAM,OAAO,GAAG,UAAU,CACxB,qCAAqC,CACmB,CAAA;IAE1D,IAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAC3C,UAAC,WAAW,IAAK,OAAA,WAAW,CAAC,UAAU,KAAK,UAAU,EAArC,CAAqC,CACvD,CAAA;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAEO,IAAA,mBAAmB,GAAwB,WAAW,oBAAnC,EAAE,WAAW,GAAW,WAAW,YAAtB,EAAE,IAAI,GAAK,WAAW,KAAhB,CAAgB;IAC9D,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,sBAAsB,CAAA"}
+{"version":3,"file":"RecommendedArticleList.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/RecommendedArticleList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,qCAAqC,EAAE,MAAM,YAAY,CAAA;AAGlE,IAAM,sBAAsB,GAAqC,UAAC,EAEjE;QADC,UAAU,gBAAA;IAEV,IAAM,OAAO,GAAG,UAAU,CACxB,qCAAqC,CACmB,CAAA;IAE1D,IAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAC3C,UAAC,WAAW,IAAK,OAAA,WAAW,CAAC,UAAU,KAAK,UAAU,EAArC,CAAqC,CACvD,CAAA;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAEO,IAAA,mBAAmB,GAA6B,WAAW,oBAAxC,EAAE,WAAW,GAAgB,WAAW,YAA3B,EAAE,IAAI,GAAU,WAAW,KAArB,EAAE,GAAG,GAAK,WAAW,IAAhB,CAAgB;IACnE,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,GACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/esm/article-recommendations/components/index.d.ts

@@ -1,6 +1,7 @@
+import AdPlaceholder from './AdPlaceholder';
 import AricleGrid from './ArticleGrid';
 import ArticleRecommendation from './ArticleRecommendation';
 import ArticleRecommendationsProvider from './ArticleRecommendationsProvider';
 import RecommendedArticleList from './RecommendedArticleList';
 export * from './baseProps';
-export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, };
+export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, AdPlaceholder, };

package/dist/esm/article-recommendations/components/index.js

@@ -1,7 +1,8 @@
+import AdPlaceholder from './AdPlaceholder';
 import AricleGrid from './ArticleGrid';
 import ArticleRecommendation from './ArticleRecommendation';
 import ArticleRecommendationsProvider from './ArticleRecommendationsProvider';
 import RecommendedArticleList from './RecommendedArticleList';
 export * from './baseProps';
-export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, };
+export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, AdPlaceholder, };
 //# sourceMappingURL=index.js.map

package/dist/esm/article-recommendations/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,8BAA8B,MAAM,kCAAkC,CAAA;AAC7E,OAAO,sBAAsB,MAAM,0BAA0B,CAAA;AAE7D,cAAc,aAAa,CAAA;AAC3B,OAAO,EACL,qBAAqB,EACrB,UAAU,EACV,8BAA8B,EAC9B,sBAAsB,GACvB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,8BAA8B,MAAM,kCAAkC,CAAA;AAC7E,OAAO,sBAAsB,MAAM,0BAA0B,CAAA;AAE7D,cAAc,aAAa,CAAA;AAC3B,OAAO,EACL,qBAAqB,EACrB,UAAU,EACV,8BAA8B,EAC9B,sBAAsB,EACtB,aAAa,GACd,CAAA"}

package/dist/esm/article-recommendations/index.d.ts

@@ -1,4 +1,4 @@
-export * from './components';
+export { ArticleRecommendation, ArticleRecommendationsProvider, RecommendedArticleList, } from './components';
 export * from './provider';
 export * from './types';
 export * from './context';

package/dist/esm/article-recommendations/index.js

@@ -1,4 +1,4 @@
-export * from './components';
+export { ArticleRecommendation, ArticleRecommendationsProvider, RecommendedArticleList, } from './components';
 export * from './provider';
 export * from './types';
 export * from './context';

package/dist/esm/article-recommendations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,sBAAsB,GACvB,MAAM,cAAc,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA"}

package/dist/esm/article-recommendations/types/index.d.ts

@@ -14,6 +14,7 @@ export type ArticleGridProps = {
     columnCount?: MQ<string>;
     size?: 'large' | 'small';
     articles: Article[];
+    ads?: AdsType;
 };
 export type ArticleRecommendationProps = {
     article: Article;
@@ -65,16 +66,30 @@ export type ArticleTypeName = 'recommendedArticles' | 'adlibraryMPU';
 export type ArticleTypes = Record<ArticleTypeName, {
     totalArticlesCount: number;
 }>;
-export type DpaTemplate = ArticleTypes & {
+export type DpaTemplate = {
     templateId: string;
     columnCount: MQ<string>;
     size: 'small' | 'large';
+    recommendedArticlesCount: number;
+    ads?: AdsType;
 };
+export interface AdsType {
+    count: number;
+    articlesMargin: number;
+    options: AdsOptions;
+}
+export interface AdsOptions {
+    id: string;
+    className: string;
+    dataAdLabel: string;
+}
 export type DpaTemplateWithArticles = {
     templateId: string;
     columnCount: MQ<string>;
     size: 'small' | 'large';
-} & Record<string, Article[]>;
+    ads?: AdsType;
+    recommendedArticles: Article[];
+};
 export type ArticleRecommendationsProviderBaseContextType = {
     dpaTemplates: DpaTemplate[];
 };

package/dist/esm/article-recommendations/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":"AA2GA,MAAM,CAAN,IAAY,cAEX;AAFD,WAAY,cAAc;IACxB,iFAAiE,CAAA;AACnE,CAAC,EAFW,cAAc,KAAd,cAAc,QAEzB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":"AA4HA,MAAM,CAAN,IAAY,cAEX;AAFD,WAAY,cAAc;IACxB,iFAAiE,CAAA;AACnE,CAAC,EAFW,cAAc,KAAd,cAAc,QAEzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/standalone-components",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Newskit Render Standalone Components",
   "author": "",
   "license": "UNLICENSED",