@newskit-render/standalone-components 0.2.0 → 0.4.0

package/README.md

@@ -1,4 +1,83 @@
 # @newskit-render/standalone-components
 
+## Overview
+
+The Standalone-components package contains components, that can live with or without the Render application.
+
+## Getting started
+
+Install the package to start using it. Depending on your package manager, run:
+
+For yarn:
+`yarn add @newskit-render/standalone-components`
+
+For npm:
+`npm install @newskit-render/standalone-components`.
+
+## Components
+
+1. Article recommendations: this component provides two main facilities:
+
+- recommendationsProvider: Provider function that accepts `articleId`, `publisher` and `userId`. The function will return an array of recommended articles.
+- ArticleRecommendation: a component that accepts `article` and `size`, where
+
+  - `article` is an object with the following properties:
+    - href: string // mandatory
+    - title: string // mandatory
+    - text: string // optional
+  - `size` can be `large` or `small`.
+
+# How to use
+
+First, you need to fetch some article recommendations with the recommendationsProvider function, then iterate over the returned array and use the ArticleRecommendation component to display them.
+
+Example of use:
+
+```typescript
+import React from 'react'
+import { Block, Grid, Cell } from 'newskit'
+import {
+  ArticleRecommendation,
+  recommendationsProvider,
+  Article,
+} from '@newskit-render/standalone-components'
+import { Publisher } from '@newskit-render/api'
+
+const Recommendations: React.FC<{
+  recommendations: Article[]
+}> = ({ recommendations }) => (
+  <Block data-testid="RelatedArticles">
+    <Grid xsMargin="space000">
+      {recommendations.map((article) => (
+        <Cell
+          key={article.title}
+          xs={12}
+          sm={6}
+          lg={3}
+          data-testid="RelatedArticlesVerticalCard"
+        >
+          <ArticleRecommendation article={article} size="large" />
+        </Cell>
+      ))}
+    </Grid>
+  </Block>
+)
+
+export default Recommendations
+
+export async function getServerSideProps(context) {
+  const recommendations = await recommendationsProvider({
+    articleId,
+    publisher: Publisher.SUN_UK,
+  })
+
+  return {
+    props: {
+      recommendations,
+    },
+  }
+}
+```
+
 .
 .

package/dist/article-recommendations/components/ArticleRecommendation.d.ts

@@ -0,0 +1,4 @@
+import { ArticleRecommendationProps } from '../types';
+import React from 'react';
+declare const ArticleRecommendation: React.FC<ArticleRecommendationProps>;
+export default ArticleRecommendation;

package/dist/article-recommendations/components/ArticleRecommendation.js

@@ -0,0 +1,19 @@
+"use strict";
+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 ArticleRecommendationLarge_1 = __importDefault(require("./ArticleRecommendationLarge"));
+var ArticleRecommendationSmall_1 = __importDefault(require("./ArticleRecommendationSmall"));
+var articlesMap = {
+    large: ArticleRecommendationLarge_1.default,
+    small: ArticleRecommendationSmall_1.default,
+};
+var ArticleRecommendation = function (_a) {
+    var article = _a.article, size = _a.size;
+    var Article = articlesMap[size];
+    return react_1.default.createElement(Article, { article: article });
+};
+exports.default = ArticleRecommendation;
+//# sourceMappingURL=ArticleRecommendation.js.map

package/dist/article-recommendations/components/ArticleRecommendation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRecommendation.js","sourceRoot":"","sources":["../../../src/article-recommendations/components/ArticleRecommendation.tsx"],"names":[],"mappings":";;;;;AACA,gDAAyB;AACzB,4FAAqE;AACrE,4FAAqE;AAErE,IAAM,WAAW,GAAG;IAClB,KAAK,EAAE,oCAA0B;IACjC,KAAK,EAAE,oCAA0B;CAClC,CAAA;AAED,IAAM,qBAAqB,GAAyC,UAAC,EAGpE;QAFC,OAAO,aAAA,EACP,IAAI,UAAA;IAEJ,IAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IACjC,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,GAAI,CAAA;AACtC,CAAC,CAAA;AAED,kBAAe,qBAAqB,CAAA"}

package/dist/article-recommendations/components/ArticleRecommendationLarge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Article } from '../types';
+declare const ArticleRecommendationLarge: React.FC<{
+    article: Article;
+}>;
+export default ArticleRecommendationLarge;

package/dist/article-recommendations/components/ArticleRecommendationLarge.js

@@ -0,0 +1,44 @@
+"use strict";
+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 ArticleRecommendationLarge = function (_a) {
+    var article = _a.article;
+    var href = article.href, title = article.title, text = article.text;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(newskit_1.Card, { href: "" + process.env.SITE_HOST, media: {
+                src: href,
+                alt: title,
+                loadingAspectRatio: '3:2',
+            }, overrides: {
+                stylePreset: 'cardContainer',
+                mediaContainer: {
+                    spaceInline: 'space030',
+                },
+            } },
+            react_1.default.createElement(newskit_1.Block, { spaceStack: "space060" },
+                react_1.default.createElement(newskit_1.Block, { spaceStack: {
+                        xs: 'space040',
+                        md: 'space050',
+                    } },
+                    react_1.default.createElement(newskit_1.Headline, { headingAs: "h6", overrides: {
+                            typographyPreset: {
+                                xs: 'editorialHeadline020',
+                                md: 'editorialHeadline030',
+                                xl: 'editorialHeadline040',
+                            },
+                        } }, title)),
+                react_1.default.createElement(newskit_1.Block, { spaceStack: {
+                        xs: 'space040',
+                        md: 'space050',
+                    } },
+                    react_1.default.createElement(newskit_1.TextBlock, { stylePreset: "inkContrast", typographyPreset: {
+                            xs: 'editorialParagraph010',
+                            md: 'editorialParagraph020',
+                        } }, text))))));
+};
+exports.default = ArticleRecommendationLarge;
+//# sourceMappingURL=ArticleRecommendationLarge.js.map

package/dist/article-recommendations/components/ArticleRecommendationLarge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRecommendationLarge.js","sourceRoot":"","sources":["../../../src/article-recommendations/components/ArticleRecommendationLarge.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAyB;AACzB,mCAA0D;AAE1D,IAAM,0BAA0B,GAAmC,UAAC,EAEnE;QADC,OAAO,aAAA;IAEC,IAAA,IAAI,GAAkB,OAAO,KAAzB,EAAE,KAAK,GAAW,OAAO,MAAlB,EAAE,IAAI,GAAK,OAAO,KAAZ,CAAY;IACrC,OAAO,CACL;QACE,8BAAC,cAAI,IACH,IAAI,EAAE,KAAG,OAAO,CAAC,GAAG,CAAC,SAAW,EAChC,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;gBACT,GAAG,EAAE,KAAK;gBACV,kBAAkB,EAAE,KAAK;aAC1B,EACD,SAAS,EAAE;gBACT,WAAW,EAAE,eAAe;gBAC5B,cAAc,EAAE;oBACd,WAAW,EAAE,UAAU;iBACxB;aACF;YAED,8BAAC,eAAK,IAAC,UAAU,EAAC,UAAU;gBAC1B,8BAAC,eAAK,IACJ,UAAU,EAAE;wBACV,EAAE,EAAE,UAAU;wBACd,EAAE,EAAE,UAAU;qBACf;oBAED,8BAAC,kBAAQ,IACP,SAAS,EAAC,IAAI,EACd,SAAS,EAAE;4BACT,gBAAgB,EAAE;gCAChB,EAAE,EAAE,sBAAsB;gCAC1B,EAAE,EAAE,sBAAsB;gCAC1B,EAAE,EAAE,sBAAsB;6BAC3B;yBACF,IAEA,KAAK,CACG,CACL;gBACR,8BAAC,eAAK,IACJ,UAAU,EAAE;wBACV,EAAE,EAAE,UAAU;wBACd,EAAE,EAAE,UAAU;qBACf;oBAED,8BAAC,mBAAS,IACR,WAAW,EAAC,aAAa,EACzB,gBAAgB,EAAE;4BAChB,EAAE,EAAE,uBAAuB;4BAC3B,EAAE,EAAE,uBAAuB;yBAC5B,IAEA,IAAI,CACK,CACN,CACF,CACH,CACN,CACJ,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,0BAA0B,CAAA"}

package/dist/article-recommendations/components/ArticleRecommendationSmall.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Article } from '../types';
+declare const ArticleRecommendationSmall: React.FC<{
+    article: Article;
+}>;
+export default ArticleRecommendationSmall;

package/dist/article-recommendations/components/ArticleRecommendationSmall.js

@@ -0,0 +1,33 @@
+"use strict";
+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 ArticleRecommendationSmall = function (_a) {
+    var article = _a.article;
+    var href = article.href, title = article.title;
+    return (react_1.default.createElement(newskit_1.Card, { href: "" + process.env.SITE_HOST, layout: "horizontal", media: {
+            src: href,
+            alt: 'Card Media',
+            loadingAspectRatio: '3:2',
+            overrides: {
+                width: '150px',
+                height: '100px',
+            },
+        }, overrides: {
+            stylePreset: 'cardContainer',
+            mediaContainer: {
+                spaceInline: 'space030',
+            },
+        } },
+        react_1.default.createElement(newskit_1.Headline, { headingAs: "h4", overrides: {
+                typographyPreset: {
+                    xs: 'editorialHeadline040',
+                    xl: 'editorialHeadline020',
+                },
+            } }, title)));
+};
+exports.default = ArticleRecommendationSmall;
+//# sourceMappingURL=ArticleRecommendationSmall.js.map

package/dist/article-recommendations/components/ArticleRecommendationSmall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRecommendationSmall.js","sourceRoot":"","sources":["../../../src/article-recommendations/components/ArticleRecommendationSmall.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAyB;AACzB,mCAAwC;AAGxC,IAAM,0BAA0B,GAAmC,UAAC,EAEnE;QADC,OAAO,aAAA;IAEC,IAAA,IAAI,GAAY,OAAO,KAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAY;IAC/B,OAAO,CACL,8BAAC,cAAI,IACH,IAAI,EAAE,KAAG,OAAO,CAAC,GAAG,CAAC,SAAW,EAChC,MAAM,EAAC,YAAY,EACnB,KAAK,EAAE;YACL,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,YAAY;YACjB,kBAAkB,EAAE,KAAK;YACzB,SAAS,EAAE;gBACT,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;aAChB;SACF,EACD,SAAS,EAAE;YACT,WAAW,EAAE,eAAe;YAC5B,cAAc,EAAE;gBACd,WAAW,EAAE,UAAU;aACxB;SACF;QAED,8BAAC,kBAAQ,IACP,SAAS,EAAC,IAAI,EACd,SAAS,EAAE;gBACT,gBAAgB,EAAE;oBAChB,EAAE,EAAE,sBAAsB;oBAC1B,EAAE,EAAE,sBAAsB;iBAC3B;aACF,IAEA,KAAK,CACG,CACN,CACR,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,0BAA0B,CAAA"}

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

@@ -0,0 +1,2 @@
+import ArticleRecommendation from './ArticleRecommendation';
+export { ArticleRecommendation };

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

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleRecommendation = void 0;
+var ArticleRecommendation_1 = __importDefault(require("./ArticleRecommendation"));
+exports.ArticleRecommendation = ArticleRecommendation_1.default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":";;;;;;AAAA,kFAA2D;AAElD,gCAFF,+BAAqB,CAEE"}

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

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './provider';
+export * from './types';

package/dist/article-recommendations/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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);
+__exportStar(require("./provider"), exports);
+__exportStar(require("./types"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/article-recommendations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,+CAA4B;AAC5B,6CAA0B;AAC1B,0CAAuB"}

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

@@ -0,0 +1 @@
+export * from './recommendationsProvider';

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

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./recommendationsProvider"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/provider/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4DAAyC"}

package/dist/article-recommendations/provider/queries/getRecommendationsQuery.d.ts

@@ -0,0 +1 @@
+export declare const GET_RECOMMENDATIONS: import("@apollo/client").DocumentNode;

package/dist/article-recommendations/provider/queries/getRecommendationsQuery.js

@@ -0,0 +1,11 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GET_RECOMMENDATIONS = void 0;
+var client_1 = require("@apollo/client");
+exports.GET_RECOMMENDATIONS = (0, client_1.gql)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  query getRecommendedArticlesSUN_UK(\n    $recomArgs: RecommendationsParameters!\n    $publisher: Publisher!\n  ) {\n    recommendations(publisher: $publisher, recomArgs: $recomArgs) {\n      feedbackId\n      articles {\n        headline\n        kicker\n        url\n        media {\n          ... on Image {\n            crops(\n              cropsArguments: [\n                { ratio: THREE_BY_TWO, maxPhysicalWidth: 150 }\n                { ratio: THREE_BY_TWO, maxPhysicalWidth: 620 }\n              ]\n            ) {\n              url\n              alt\n              width\n              height\n            }\n          }\n          ... on Video {\n            posterImage {\n              crops {\n                url\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"], ["\n  query getRecommendedArticlesSUN_UK(\n    $recomArgs: RecommendationsParameters!\n    $publisher: Publisher!\n  ) {\n    recommendations(publisher: $publisher, recomArgs: $recomArgs) {\n      feedbackId\n      articles {\n        headline\n        kicker\n        url\n        media {\n          ... on Image {\n            crops(\n              cropsArguments: [\n                { ratio: THREE_BY_TWO, maxPhysicalWidth: 150 }\n                { ratio: THREE_BY_TWO, maxPhysicalWidth: 620 }\n              ]\n            ) {\n              url\n              alt\n              width\n              height\n            }\n          }\n          ... on Video {\n            posterImage {\n              crops {\n                url\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"])));
+var templateObject_1;
+//# sourceMappingURL=getRecommendationsQuery.js.map

package/dist/article-recommendations/provider/queries/getRecommendationsQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getRecommendationsQuery.js","sourceRoot":"","sources":["../../../../src/article-recommendations/provider/queries/getRecommendationsQuery.ts"],"names":[],"mappings":";;;;;;;AAAA,yCAAoC;AAEvB,QAAA,mBAAmB,OAAG,YAAG,m3BAAA,+yBAoCrC,KAAA"}

package/dist/article-recommendations/provider/queries/index.d.ts

@@ -0,0 +1 @@
+export * from './getRecommendationsQuery';

package/dist/article-recommendations/provider/queries/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./getRecommendationsQuery"), exports);
+//# sourceMappingURL=index.js.map

package/dist/article-recommendations/provider/queries/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/provider/queries/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4DAAyC"}

package/dist/article-recommendations/provider/recommendationsProvider.d.ts

@@ -0,0 +1,2 @@
+import { ProviderArgs, Article } from '../index';
+export declare const recommendationsProvider: ({ articleId, publisher, userId, }: ProviderArgs) => Promise<Article[]>;

package/dist/article-recommendations/provider/recommendationsProvider.js

@@ -0,0 +1,74 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recommendationsProvider = void 0;
+var api_1 = require("@newskit-render/api");
+var queries_1 = require("./queries");
+var recommendationsProvider = function (_a) {
+    var articleId = _a.articleId, publisher = _a.publisher, userId = _a.userId;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var apolloClient, response, recommendedArticles;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, (0, api_1.createApolloClient)(api_1.ClientTypes.nkapi)];
+                case 1:
+                    apolloClient = _b.sent();
+                    return [4 /*yield*/, apolloClient.query({
+                            query: queries_1.GET_RECOMMENDATIONS,
+                            variables: { publisher: publisher, recomArgs: { articleId: articleId, userId: userId } },
+                        })];
+                case 2:
+                    response = _b.sent();
+                    recommendedArticles = response.data.recommendations.articles.map(function (article) {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        return ({
+                            title: article.kicker,
+                            tag: article.kicker,
+                            text: article.headline,
+                            href: ((_d = (_c = (_b = (_a = article.media) === null || _a === void 0 ? void 0 : _a.posterImage) === null || _b === void 0 ? void 0 : _b.crops) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.url) ||
+                                ((_g = (_f = (_e = article.media) === null || _e === void 0 ? void 0 : _e.crops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.url) ||
+                                null,
+                        });
+                    });
+                    return [2 /*return*/, recommendedArticles];
+            }
+        });
+    });
+};
+exports.recommendationsProvider = recommendationsProvider;
+//# sourceMappingURL=recommendationsProvider.js.map

package/dist/article-recommendations/provider/recommendationsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recommendationsProvider.js","sourceRoot":"","sources":["../../../src/article-recommendations/provider/recommendationsProvider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAqE;AACrE,qCAA+C;AAGxC,IAAM,uBAAuB,GAAG,UAAO,EAI/B;QAHb,SAAS,eAAA,EACT,SAAS,eAAA,EACT,MAAM,YAAA;;;;;wBAEe,qBAAM,IAAA,wBAAkB,EAAC,iBAAW,CAAC,KAAK,CAAC,EAAA;;oBAA1D,YAAY,GAAG,SAA2C;oBAC/C,qBAAM,YAAY,CAAC,KAAK,CAAC;4BACxC,KAAK,EAAE,6BAAmB;4BAC1B,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,MAAM,QAAA,EAAE,EAAE;yBAC3D,CAAC,EAAA;;oBAHI,QAAQ,GAAG,SAGf;oBAEI,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,CACpE,UAAC,OAAO;;wBAAK,OAAA,CAAC;4BACZ,KAAK,EAAE,OAAO,CAAC,MAAM;4BACrB,GAAG,EAAE,OAAO,CAAC,MAAM;4BACnB,IAAI,EAAE,OAAO,CAAC,QAAQ;4BACtB,IAAI,EACF,CAAA,MAAA,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,WAAW,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG;iCAC3C,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG,CAAA;gCAC9B,IAAI;yBACP,CAAC,CAAA;qBAAA,CACH,CAAA;oBAED,sBAAO,mBAAmB,EAAA;;;;CAC3B,CAAA;AAxBY,QAAA,uBAAuB,2BAwBnC"}

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

@@ -0,0 +1,15 @@
+import { Publisher } from '@newskit-render/api';
+export declare type Article = {
+    href: string;
+    title: string;
+    text?: string;
+};
+export declare type ArticleRecommendationProps = {
+    article: Article;
+    size: 'large' | 'small';
+};
+export declare type ProviderArgs = {
+    userId?: string;
+    publisher: Publisher;
+    articleId: string;
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,4 @@
+import { ArticleRecommendationProps } from '../types';
+import React from 'react';
+declare const ArticleRecommendation: React.FC<ArticleRecommendationProps>;
+export default ArticleRecommendation;

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

@@ -0,0 +1,19 @@
+"use strict";
+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 ArticleRecommendationLarge_1 = __importDefault(require("./ArticleRecommendationLarge"));
+var ArticleRecommendationSmall_1 = __importDefault(require("./ArticleRecommendationSmall"));
+var articlesMap = {
+    large: ArticleRecommendationLarge_1.default,
+    small: ArticleRecommendationSmall_1.default,
+};
+var ArticleRecommendation = function (_a) {
+    var article = _a.article, size = _a.size;
+    var Article = articlesMap[size];
+    return react_1.default.createElement(Article, { article: article });
+};
+exports.default = ArticleRecommendation;
+//# sourceMappingURL=ArticleRecommendation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRecommendation.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendation.tsx"],"names":[],"mappings":";;;;;AACA,gDAAyB;AACzB,4FAAqE;AACrE,4FAAqE;AAErE,IAAM,WAAW,GAAG;IAClB,KAAK,EAAE,oCAA0B;IACjC,KAAK,EAAE,oCAA0B;CAClC,CAAA;AAED,IAAM,qBAAqB,GAAyC,UAAC,EAGpE;QAFC,OAAO,aAAA,EACP,IAAI,UAAA;IAEJ,IAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IACjC,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,GAAI,CAAA;AACtC,CAAC,CAAA;AAED,kBAAe,qBAAqB,CAAA"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Article } from '../types';
+declare const ArticleRecommendationLarge: React.FC<{
+    article: Article;
+}>;
+export default ArticleRecommendationLarge;

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

@@ -0,0 +1,44 @@
+"use strict";
+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 ArticleRecommendationLarge = function (_a) {
+    var article = _a.article;
+    var href = article.href, title = article.title, text = article.text;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(newskit_1.Card, { href: "" + process.env.SITE_HOST, media: {
+                src: href,
+                alt: title,
+                loadingAspectRatio: '3:2',
+            }, overrides: {
+                stylePreset: 'cardContainer',
+                mediaContainer: {
+                    spaceInline: 'space030',
+                },
+            } },
+            react_1.default.createElement(newskit_1.Block, { spaceStack: "space060" },
+                react_1.default.createElement(newskit_1.Block, { spaceStack: {
+                        xs: 'space040',
+                        md: 'space050',
+                    } },
+                    react_1.default.createElement(newskit_1.Headline, { headingAs: "h6", overrides: {
+                            typographyPreset: {
+                                xs: 'editorialHeadline020',
+                                md: 'editorialHeadline030',
+                                xl: 'editorialHeadline040',
+                            },
+                        } }, title)),
+                react_1.default.createElement(newskit_1.Block, { spaceStack: {
+                        xs: 'space040',
+                        md: 'space050',
+                    } },
+                    react_1.default.createElement(newskit_1.TextBlock, { stylePreset: "inkContrast", typographyPreset: {
+                            xs: 'editorialParagraph010',
+                            md: 'editorialParagraph020',
+                        } }, text))))));
+};
+exports.default = ArticleRecommendationLarge;
+//# sourceMappingURL=ArticleRecommendationLarge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRecommendationLarge.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendationLarge.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAyB;AACzB,mCAA0D;AAE1D,IAAM,0BAA0B,GAAmC,UAAC,EAEnE;QADC,OAAO,aAAA;IAEC,IAAA,IAAI,GAAkB,OAAO,KAAzB,EAAE,KAAK,GAAW,OAAO,MAAlB,EAAE,IAAI,GAAK,OAAO,KAAZ,CAAY;IACrC,OAAO,CACL;QACE,8BAAC,cAAI,IACH,IAAI,EAAE,KAAG,OAAO,CAAC,GAAG,CAAC,SAAW,EAChC,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;gBACT,GAAG,EAAE,KAAK;gBACV,kBAAkB,EAAE,KAAK;aAC1B,EACD,SAAS,EAAE;gBACT,WAAW,EAAE,eAAe;gBAC5B,cAAc,EAAE;oBACd,WAAW,EAAE,UAAU;iBACxB;aACF;YAED,8BAAC,eAAK,IAAC,UAAU,EAAC,UAAU;gBAC1B,8BAAC,eAAK,IACJ,UAAU,EAAE;wBACV,EAAE,EAAE,UAAU;wBACd,EAAE,EAAE,UAAU;qBACf;oBAED,8BAAC,kBAAQ,IACP,SAAS,EAAC,IAAI,EACd,SAAS,EAAE;4BACT,gBAAgB,EAAE;gCAChB,EAAE,EAAE,sBAAsB;gCAC1B,EAAE,EAAE,sBAAsB;gCAC1B,EAAE,EAAE,sBAAsB;6BAC3B;yBACF,IAEA,KAAK,CACG,CACL;gBACR,8BAAC,eAAK,IACJ,UAAU,EAAE;wBACV,EAAE,EAAE,UAAU;wBACd,EAAE,EAAE,UAAU;qBACf;oBAED,8BAAC,mBAAS,IACR,WAAW,EAAC,aAAa,EACzB,gBAAgB,EAAE;4BAChB,EAAE,EAAE,uBAAuB;4BAC3B,EAAE,EAAE,uBAAuB;yBAC5B,IAEA,IAAI,CACK,CACN,CACF,CACH,CACN,CACJ,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,0BAA0B,CAAA"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Article } from '../types';
+declare const ArticleRecommendationSmall: React.FC<{
+    article: Article;
+}>;
+export default ArticleRecommendationSmall;

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

@@ -0,0 +1,33 @@
+"use strict";
+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 ArticleRecommendationSmall = function (_a) {
+    var article = _a.article;
+    var href = article.href, title = article.title;
+    return (react_1.default.createElement(newskit_1.Card, { href: "" + process.env.SITE_HOST, layout: "horizontal", media: {
+            src: href,
+            alt: 'Card Media',
+            loadingAspectRatio: '3:2',
+            overrides: {
+                width: '150px',
+                height: '100px',
+            },
+        }, overrides: {
+            stylePreset: 'cardContainer',
+            mediaContainer: {
+                spaceInline: 'space030',
+            },
+        } },
+        react_1.default.createElement(newskit_1.Headline, { headingAs: "h4", overrides: {
+                typographyPreset: {
+                    xs: 'editorialHeadline040',
+                    xl: 'editorialHeadline020',
+                },
+            } }, title)));
+};
+exports.default = ArticleRecommendationSmall;
+//# sourceMappingURL=ArticleRecommendationSmall.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRecommendationSmall.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendationSmall.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAyB;AACzB,mCAAwC;AAGxC,IAAM,0BAA0B,GAAmC,UAAC,EAEnE;QADC,OAAO,aAAA;IAEC,IAAA,IAAI,GAAY,OAAO,KAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAY;IAC/B,OAAO,CACL,8BAAC,cAAI,IACH,IAAI,EAAE,KAAG,OAAO,CAAC,GAAG,CAAC,SAAW,EAChC,MAAM,EAAC,YAAY,EACnB,KAAK,EAAE;YACL,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,YAAY;YACjB,kBAAkB,EAAE,KAAK;YACzB,SAAS,EAAE;gBACT,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;aAChB;SACF,EACD,SAAS,EAAE;YACT,WAAW,EAAE,eAAe;YAC5B,cAAc,EAAE;gBACd,WAAW,EAAE,UAAU;aACxB;SACF;QAED,8BAAC,kBAAQ,IACP,SAAS,EAAC,IAAI,EACd,SAAS,EAAE;gBACT,gBAAgB,EAAE;oBAChB,EAAE,EAAE,sBAAsB;oBAC1B,EAAE,EAAE,sBAAsB;iBAC3B;aACF,IAEA,KAAK,CACG,CACN,CACR,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,0BAA0B,CAAA"}

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

@@ -0,0 +1,2 @@
+import ArticleRecommendation from './ArticleRecommendation';
+export { ArticleRecommendation };

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

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleRecommendation = void 0;
+var ArticleRecommendation_1 = __importDefault(require("./ArticleRecommendation"));
+exports.ArticleRecommendation = ArticleRecommendation_1.default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":";;;;;;AAAA,kFAA2D;AAElD,gCAFF,+BAAqB,CAEE"}

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

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './provider';
+export * from './types';

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

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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);
+__exportStar(require("./provider"), exports);
+__exportStar(require("./types"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,+CAA4B;AAC5B,6CAA0B;AAC1B,0CAAuB"}

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

@@ -0,0 +1 @@
+export * from './recommendationsProvider';

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

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./recommendationsProvider"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/provider/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4DAAyC"}

package/dist/cjs/article-recommendations/provider/queries/getRecommendationsQuery.d.ts

@@ -0,0 +1 @@
+export declare const GET_RECOMMENDATIONS: import("@apollo/client").DocumentNode;

package/dist/cjs/article-recommendations/provider/queries/getRecommendationsQuery.js

@@ -0,0 +1,11 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GET_RECOMMENDATIONS = void 0;
+var client_1 = require("@apollo/client");
+exports.GET_RECOMMENDATIONS = (0, client_1.gql)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  query getRecommendedArticlesSUN_UK(\n    $recomArgs: RecommendationsParameters!\n    $publisher: Publisher!\n  ) {\n    recommendations(publisher: $publisher, recomArgs: $recomArgs) {\n      feedbackId\n      articles {\n        headline\n        kicker\n        url\n        media {\n          ... on Image {\n            crops(\n              cropsArguments: [\n                { ratio: THREE_BY_TWO, maxPhysicalWidth: 150 }\n                { ratio: THREE_BY_TWO, maxPhysicalWidth: 620 }\n              ]\n            ) {\n              url\n              alt\n              width\n              height\n            }\n          }\n          ... on Video {\n            posterImage {\n              crops {\n                url\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"], ["\n  query getRecommendedArticlesSUN_UK(\n    $recomArgs: RecommendationsParameters!\n    $publisher: Publisher!\n  ) {\n    recommendations(publisher: $publisher, recomArgs: $recomArgs) {\n      feedbackId\n      articles {\n        headline\n        kicker\n        url\n        media {\n          ... on Image {\n            crops(\n              cropsArguments: [\n                { ratio: THREE_BY_TWO, maxPhysicalWidth: 150 }\n                { ratio: THREE_BY_TWO, maxPhysicalWidth: 620 }\n              ]\n            ) {\n              url\n              alt\n              width\n              height\n            }\n          }\n          ... on Video {\n            posterImage {\n              crops {\n                url\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"])));
+var templateObject_1;
+//# sourceMappingURL=getRecommendationsQuery.js.map

package/dist/cjs/article-recommendations/provider/queries/getRecommendationsQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getRecommendationsQuery.js","sourceRoot":"","sources":["../../../../../src/article-recommendations/provider/queries/getRecommendationsQuery.ts"],"names":[],"mappings":";;;;;;;AAAA,yCAAoC;AAEvB,QAAA,mBAAmB,OAAG,YAAG,m3BAAA,+yBAoCrC,KAAA"}

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

@@ -0,0 +1 @@
+export * from './getRecommendationsQuery';

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

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./getRecommendationsQuery"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/article-recommendations/provider/queries/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4DAAyC"}

package/dist/cjs/article-recommendations/provider/recommendationsProvider.d.ts

@@ -0,0 +1,2 @@
+import { ProviderArgs, Article } from '../index';
+export declare const recommendationsProvider: ({ articleId, publisher, userId, }: ProviderArgs) => Promise<Article[]>;

package/dist/cjs/article-recommendations/provider/recommendationsProvider.js

@@ -0,0 +1,74 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recommendationsProvider = void 0;
+var api_1 = require("@newskit-render/api");
+var queries_1 = require("./queries");
+var recommendationsProvider = function (_a) {
+    var articleId = _a.articleId, publisher = _a.publisher, userId = _a.userId;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var apolloClient, response, recommendedArticles;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, (0, api_1.createApolloClient)(api_1.ClientTypes.nkapi)];
+                case 1:
+                    apolloClient = _b.sent();
+                    return [4 /*yield*/, apolloClient.query({
+                            query: queries_1.GET_RECOMMENDATIONS,
+                            variables: { publisher: publisher, recomArgs: { articleId: articleId, userId: userId } },
+                        })];
+                case 2:
+                    response = _b.sent();
+                    recommendedArticles = response.data.recommendations.articles.map(function (article) {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        return ({
+                            title: article.kicker,
+                            tag: article.kicker,
+                            text: article.headline,
+                            href: ((_d = (_c = (_b = (_a = article.media) === null || _a === void 0 ? void 0 : _a.posterImage) === null || _b === void 0 ? void 0 : _b.crops) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.url) ||
+                                ((_g = (_f = (_e = article.media) === null || _e === void 0 ? void 0 : _e.crops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.url) ||
+                                null,
+                        });
+                    });
+                    return [2 /*return*/, recommendedArticles];
+            }
+        });
+    });
+};
+exports.recommendationsProvider = recommendationsProvider;
+//# sourceMappingURL=recommendationsProvider.js.map

package/dist/cjs/article-recommendations/provider/recommendationsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/provider/recommendationsProvider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAqE;AACrE,qCAA+C;AAGxC,IAAM,uBAAuB,GAAG,UAAO,EAI/B;QAHb,SAAS,eAAA,EACT,SAAS,eAAA,EACT,MAAM,YAAA;;;;;wBAEe,qBAAM,IAAA,wBAAkB,EAAC,iBAAW,CAAC,KAAK,CAAC,EAAA;;oBAA1D,YAAY,GAAG,SAA2C;oBAC/C,qBAAM,YAAY,CAAC,KAAK,CAAC;4BACxC,KAAK,EAAE,6BAAmB;4BAC1B,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,MAAM,QAAA,EAAE,EAAE;yBAC3D,CAAC,EAAA;;oBAHI,QAAQ,GAAG,SAGf;oBAEI,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,CACpE,UAAC,OAAO;;wBAAK,OAAA,CAAC;4BACZ,KAAK,EAAE,OAAO,CAAC,MAAM;4BACrB,GAAG,EAAE,OAAO,CAAC,MAAM;4BACnB,IAAI,EAAE,OAAO,CAAC,QAAQ;4BACtB,IAAI,EACF,CAAA,MAAA,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,WAAW,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG;iCAC3C,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG,CAAA;gCAC9B,IAAI;yBACP,CAAC,CAAA;qBAAA,CACH,CAAA;oBAED,sBAAO,mBAAmB,EAAA;;;;CAC3B,CAAA;AAxBY,QAAA,uBAAuB,2BAwBnC"}

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

@@ -0,0 +1,15 @@
+import { Publisher } from '@newskit-render/api';
+export declare type Article = {
+    href: string;
+    title: string;
+    text?: string;
+};
+export declare type ArticleRecommendationProps = {
+    article: Article;
+    size: 'large' | 'small';
+};
+export declare type ProviderArgs = {
+    userId?: string;
+    publisher: Publisher;
+    articleId: string;
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":""}

package/dist/cjs/index.d.ts

@@ -1 +1 @@
-export declare const test = "test";
+export * from './article-recommendations';

package/dist/cjs/index.js

@@ -1,5 +1,14 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
-exports.test = void 0;
-exports.test = 'test';
+__exportStar(require("./article-recommendations"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,IAAI,GAAG,MAAM,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4DAAyC"}

package/dist/index.d.ts

@@ -1 +1 @@
-export declare const test = "test";
+export * from './article-recommendations';

package/dist/index.js

@@ -1,5 +1,14 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
-exports.test = void 0;
-exports.test = 'test';
+__exportStar(require("./article-recommendations"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,IAAI,GAAG,MAAM,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4DAAyC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/standalone-components",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Newskit Render Standalone Components",
   "author": "",
   "license": "UNLICENSED",
@@ -76,7 +76,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@hookform/resolvers": "2.8.3",
-    "striptags": "3.2.0"
+    "@apollo/client": "3.4.16",
+    "@newskit-render/api": "^0.19.0",
+    "graphql": "15.6.0"
+  },
+  "resolutions": {
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.2"
+  },
+  "overrides": {
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.2"
   }
 }