@ndla/article-converter 1.1.5 → 2.0.0

package/es/plugins/embed/KeyFigureEmbedPlugin.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { attributesToProps } from 'html-react-parser';
+import { KeyFigure } from '@ndla/ui';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export var keyFigureEmbedPlugin = function keyFigureEmbedPlugin(element, _) {
+  var _data$data$metaImage, _data$data$metaImage2;
+  var props = attributesToProps(element.attribs);
+  var data = JSON.parse(props['data-json']);
+  var _data$embedData = data.embedData,
+    title = _data$embedData.title,
+    subtitle = _data$embedData.subtitle;
+  return _jsx(KeyFigure, {
+    title: title,
+    subtitle: subtitle,
+    image: data.status === 'success' ? {
+      src: (_data$data$metaImage = data.data.metaImage) === null || _data$data$metaImage === void 0 ? void 0 : _data$data$metaImage.image.imageUrl,
+      alt: (_data$data$metaImage2 = data.data.metaImage) === null || _data$data$metaImage2 === void 0 ? void 0 : _data$data$metaImage2.alttext.alttext
+    } : undefined
+  });
+};

package/es/plugins/embed/audioEmbedPlugin.js

@@ -10,10 +10,11 @@ import { attributesToProps } from 'html-react-parser';
 import { AudioEmbed } from '@ndla/ui';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export var audioEmbedPlugin = function audioEmbedPlugin(element, _, opts) {
+  var _opts$components;
   var props = attributesToProps(element.attribs);
   var data = JSON.parse(props['data-json']);
   return _jsx(AudioEmbed, {
     embed: data,
-    articlePath: opts.path
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
   });
 };

package/es/plugins/embed/blogPostEmbedPlugin.js

@@ -30,7 +30,7 @@ export var blogPostEmbedPlugin = function blogPostEmbedPlugin(element) {
     size: size,
     metaImage: {
       alt: '',
-      url: data.status === 'success' ? (_data$data$metaImage$ = (_data$data$metaImage = data.data.metaImage) === null || _data$data$metaImage === void 0 ? void 0 : _data$data$metaImage.imageUrl) !== null && _data$data$metaImage$ !== void 0 ? _data$data$metaImage$ : errorSvgSrc : errorSvgSrc
+      url: data.status === 'success' ? (_data$data$metaImage$ = (_data$data$metaImage = data.data.metaImage) === null || _data$data$metaImage === void 0 ? void 0 : _data$data$metaImage.image.imageUrl) !== null && _data$data$metaImage$ !== void 0 ? _data$data$metaImage$ : errorSvgSrc : errorSvgSrc
     }
   });
 };

package/es/plugins/embed/brightcoveEmbedPlugin.js

@@ -9,10 +9,12 @@
 import { attributesToProps } from 'html-react-parser';
 import { BrightcoveEmbed } from '@ndla/ui';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-export var brightcoveEmbedPlugin = function brightcoveEmbedPlugin(element) {
+export var brightcoveEmbedPlugin = function brightcoveEmbedPlugin(element, _, opts) {
+  var _opts$components;
   var props = attributesToProps(element.attribs);
   var data = JSON.parse(props['data-json']);
   return _jsx(BrightcoveEmbed, {
-    embed: data
+    embed: data,
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
   });
 };

package/es/plugins/embed/campaignBlockPlugin.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { attributesToProps } from 'html-react-parser';
+import { CampaignBlock } from '@ndla/ui';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export var campaignBlockPlugin = function campaignBlockPlugin(element) {
+  var props = attributesToProps(element.attribs);
+  var data = JSON.parse(props['data-json']);
+  var embed = data.embedData;
+  return _jsx(CampaignBlock, {
+    title: {
+      title: embed.title,
+      language: embed.titleLanguage
+    },
+    description: {
+      text: embed.description,
+      language: embed.descriptionLanguage
+    },
+    url: {
+      url: embed.url,
+      text: embed.urlText
+    },
+    imageAfter: data.status === 'success' && data.data.imageAfter ? {
+      src: data.data.imageAfter.image.imageUrl,
+      alt: data.data.imageAfter.alttext.alttext
+    } : undefined,
+    imageBefore: data.status === 'success' && data.data.imageBefore ? {
+      src: data.data.imageBefore.image.imageUrl,
+      alt: data.data.imageBefore.alttext.alttext
+    } : undefined
+  });
+};

package/es/plugins/embed/conceptEmbedPlugin.js

@@ -9,11 +9,13 @@
 import { attributesToProps } from 'html-react-parser';
 import { ConceptEmbed } from '@ndla/ui';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-export var conceptEmbedPlugin = function conceptEmbedPlugin(element) {
+export var conceptEmbedPlugin = function conceptEmbedPlugin(element, _, opts) {
+  var _opts$components;
   var props = attributesToProps(element.attribs);
   var data = JSON.parse(props['data-json']);
   return _jsx(ConceptEmbed, {
     embed: data,
-    fullWidth: true
+    fullWidth: true,
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
   });
 };

package/es/plugins/embed/imageEmbedPlugin.js

@@ -10,11 +10,12 @@ import { ImageEmbed } from '@ndla/ui';
 import { attributesToProps } from 'html-react-parser';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export var imageEmbedPlugin = function imageEmbedPlugin(element, _, opts) {
+  var _opts$components;
   var props = attributesToProps(element.attribs);
   var data = JSON.parse(props['data-json']);
   return _jsx(ImageEmbed, {
     embed: data,
-    articlePath: opts.path,
-    previewAlt: opts.previewAlt
+    previewAlt: opts.previewAlt,
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
   });
 };

package/es/plugins/embed/index.js

@@ -20,8 +20,9 @@ import { conceptListEmbedPlugin } from './conceptListEmbedPlugin';
 import { fileEmbedPlugin } from './fileEmbedPlugin';
 import { codeEmbedPlugin } from './codeEmbedPlugin';
 import { blogPostEmbedPlugin } from './blogPostEmbedPlugin';
-import { keyPerformanceIndicatorEmbedPlugin } from './keyPerformanceIndicatorEmbedPlugin';
+import { keyFigureEmbedPlugin } from './KeyFigureEmbedPlugin';
 import { contactBlockEmbedPlugin } from './contactBlockEmbedPlugin';
+import { campaignBlockPlugin } from './campaignBlockPlugin';
 export var embedPlugins = {
   image: imageEmbedPlugin,
   audio: audioEmbedPlugin,
@@ -37,6 +38,7 @@ export var embedPlugins = {
   'concept-list': conceptListEmbedPlugin,
   'blog-post': blogPostEmbedPlugin,
   file: fileEmbedPlugin,
-  'key-performance-indicator': keyPerformanceIndicatorEmbedPlugin,
-  'contact-block': contactBlockEmbedPlugin
+  'key-figure': keyFigureEmbedPlugin,
+  'contact-block': contactBlockEmbedPlugin,
+  'campaign-block': campaignBlockPlugin
 };

package/es/plugins/olPlugin.js

@@ -12,6 +12,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  *
  */
 
+import { OrderedList } from '@ndla/ui';
 import { attributesToProps, domToReact } from 'html-react-parser';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export var olPlugin = function olPlugin(node, opts) {
@@ -23,8 +24,7 @@ export var olPlugin = function olPlugin(node, opts) {
   var classes = [(_node$attribs$class = node.attribs["class"]) !== null && _node$attribs$class !== void 0 ? _node$attribs$class : false, letterClass, numClass].filter(function (c) {
     return !!c;
   }).join(' ');
-  return _jsx("ol", _objectSpread(_objectSpread({}, props), {}, {
-    "data-type": undefined,
+  return _jsx(OrderedList, _objectSpread(_objectSpread({}, props), {}, {
     className: classes.length ? classes : undefined,
     children: domToReact(node.children, opts)
   }));

package/es/plugins/ulPlugin.js

@@ -12,6 +12,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  *
  */
 
+import { UnOrderedList } from '@ndla/ui';
 import { attributesToProps, domToReact } from 'html-react-parser';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export var ulPlugin = function ulPlugin(node, opts) {
@@ -21,8 +22,7 @@ export var ulPlugin = function ulPlugin(node, opts) {
     var classes = [(_node$attribs$class = node.attribs["class"]) !== null && _node$attribs$class !== void 0 ? _node$attribs$class : '', 'o-list--two-columns'].filter(function (c) {
       return !!c;
     }).join(' ');
-    return _jsx("ul", _objectSpread(_objectSpread({}, props), {}, {
-      "data-type": undefined,
+    return _jsx(UnOrderedList, _objectSpread(_objectSpread({}, props), {}, {
       className: classes,
       children: domToReact(node.children, opts)
     }));

package/lib/index.d.ts

@@ -7,4 +7,4 @@
  */
 export { default as transform } from './transform';
 export { default as extractEmbedMeta } from './extractEmbedMeta';
-export type { TransformOptions } from './plugins/types';
+export type { TransformOptions, DynamicComponents } from './plugins/types';

package/lib/plugins/embed/KeyFigureEmbedPlugin.d.ts

@@ -0,0 +1,2 @@
+import { PluginType } from '../types';
+export declare const keyFigureEmbedPlugin: PluginType;

package/lib/plugins/embed/KeyFigureEmbedPlugin.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.keyFigureEmbedPlugin = void 0;
+var _htmlReactParser = require("html-react-parser");
+var _ui = require("@ndla/ui");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+var keyFigureEmbedPlugin = function keyFigureEmbedPlugin(element, _) {
+  var _data$data$metaImage, _data$data$metaImage2;
+  var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
+  var data = JSON.parse(props['data-json']);
+  var _data$embedData = data.embedData,
+    title = _data$embedData.title,
+    subtitle = _data$embedData.subtitle;
+  return (0, _jsxRuntime.jsx)(_ui.KeyFigure, {
+    title: title,
+    subtitle: subtitle,
+    image: data.status === 'success' ? {
+      src: (_data$data$metaImage = data.data.metaImage) === null || _data$data$metaImage === void 0 ? void 0 : _data$data$metaImage.image.imageUrl,
+      alt: (_data$data$metaImage2 = data.data.metaImage) === null || _data$data$metaImage2 === void 0 ? void 0 : _data$data$metaImage2.alttext.alttext
+    } : undefined
+  });
+};
+exports.keyFigureEmbedPlugin = keyFigureEmbedPlugin;

package/lib/plugins/embed/audioEmbedPlugin.js

@@ -16,11 +16,12 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 
 var audioEmbedPlugin = function audioEmbedPlugin(element, _, opts) {
+  var _opts$components;
   var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
   var data = JSON.parse(props['data-json']);
   return (0, _jsxRuntime.jsx)(_ui.AudioEmbed, {
     embed: data,
-    articlePath: opts.path
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
   });
 };
 exports.audioEmbedPlugin = audioEmbedPlugin;

package/lib/plugins/embed/blogPostEmbedPlugin.js

@@ -37,7 +37,7 @@ var blogPostEmbedPlugin = function blogPostEmbedPlugin(element) {
     size: size,
     metaImage: {
       alt: '',
-      url: data.status === 'success' ? (_data$data$metaImage$ = (_data$data$metaImage = data.data.metaImage) === null || _data$data$metaImage === void 0 ? void 0 : _data$data$metaImage.imageUrl) !== null && _data$data$metaImage$ !== void 0 ? _data$data$metaImage$ : errorSvgSrc : errorSvgSrc
+      url: data.status === 'success' ? (_data$data$metaImage$ = (_data$data$metaImage = data.data.metaImage) === null || _data$data$metaImage === void 0 ? void 0 : _data$data$metaImage.image.imageUrl) !== null && _data$data$metaImage$ !== void 0 ? _data$data$metaImage$ : errorSvgSrc : errorSvgSrc
     }
   });
 };

package/lib/plugins/embed/brightcoveEmbedPlugin.js

@@ -15,11 +15,13 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  *
  */
 
-var brightcoveEmbedPlugin = function brightcoveEmbedPlugin(element) {
+var brightcoveEmbedPlugin = function brightcoveEmbedPlugin(element, _, opts) {
+  var _opts$components;
   var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
   var data = JSON.parse(props['data-json']);
   return (0, _jsxRuntime.jsx)(_ui.BrightcoveEmbed, {
-    embed: data
+    embed: data,
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
   });
 };
 exports.brightcoveEmbedPlugin = brightcoveEmbedPlugin;

package/lib/plugins/embed/campaignBlockPlugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { PluginType } from '../types';
+export declare const campaignBlockPlugin: PluginType;

package/lib/plugins/embed/campaignBlockPlugin.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.campaignBlockPlugin = void 0;
+var _htmlReactParser = require("html-react-parser");
+var _ui = require("@ndla/ui");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+var campaignBlockPlugin = function campaignBlockPlugin(element) {
+  var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
+  var data = JSON.parse(props['data-json']);
+  var embed = data.embedData;
+  return (0, _jsxRuntime.jsx)(_ui.CampaignBlock, {
+    title: {
+      title: embed.title,
+      language: embed.titleLanguage
+    },
+    description: {
+      text: embed.description,
+      language: embed.descriptionLanguage
+    },
+    url: {
+      url: embed.url,
+      text: embed.urlText
+    },
+    imageAfter: data.status === 'success' && data.data.imageAfter ? {
+      src: data.data.imageAfter.image.imageUrl,
+      alt: data.data.imageAfter.alttext.alttext
+    } : undefined,
+    imageBefore: data.status === 'success' && data.data.imageBefore ? {
+      src: data.data.imageBefore.image.imageUrl,
+      alt: data.data.imageBefore.alttext.alttext
+    } : undefined
+  });
+};
+exports.campaignBlockPlugin = campaignBlockPlugin;

package/lib/plugins/embed/conceptEmbedPlugin.js

@@ -15,12 +15,14 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  *
  */
 
-var conceptEmbedPlugin = function conceptEmbedPlugin(element) {
+var conceptEmbedPlugin = function conceptEmbedPlugin(element, _, opts) {
+  var _opts$components;
   var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
   var data = JSON.parse(props['data-json']);
   return (0, _jsxRuntime.jsx)(_ui.ConceptEmbed, {
     embed: data,
-    fullWidth: true
+    fullWidth: true,
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
   });
 };
 exports.conceptEmbedPlugin = conceptEmbedPlugin;

package/lib/plugins/embed/imageEmbedPlugin.js

@@ -16,12 +16,13 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 
 var imageEmbedPlugin = function imageEmbedPlugin(element, _, opts) {
+  var _opts$components;
   var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
   var data = JSON.parse(props['data-json']);
   return (0, _jsxRuntime.jsx)(_ui.ImageEmbed, {
     embed: data,
-    articlePath: opts.path,
-    previewAlt: opts.previewAlt
+    previewAlt: opts.previewAlt,
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
   });
 };
 exports.imageEmbedPlugin = imageEmbedPlugin;

package/lib/plugins/embed/index.js

@@ -18,8 +18,9 @@ var _conceptListEmbedPlugin = require("./conceptListEmbedPlugin");
 var _fileEmbedPlugin = require("./fileEmbedPlugin");
 var _codeEmbedPlugin = require("./codeEmbedPlugin");
 var _blogPostEmbedPlugin = require("./blogPostEmbedPlugin");
-var _keyPerformanceIndicatorEmbedPlugin = require("./keyPerformanceIndicatorEmbedPlugin");
+var _KeyFigureEmbedPlugin = require("./KeyFigureEmbedPlugin");
 var _contactBlockEmbedPlugin = require("./contactBlockEmbedPlugin");
+var _campaignBlockPlugin = require("./campaignBlockPlugin");
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -43,7 +44,8 @@ var embedPlugins = {
   'concept-list': _conceptListEmbedPlugin.conceptListEmbedPlugin,
   'blog-post': _blogPostEmbedPlugin.blogPostEmbedPlugin,
   file: _fileEmbedPlugin.fileEmbedPlugin,
-  'key-performance-indicator': _keyPerformanceIndicatorEmbedPlugin.keyPerformanceIndicatorEmbedPlugin,
-  'contact-block': _contactBlockEmbedPlugin.contactBlockEmbedPlugin
+  'key-figure': _KeyFigureEmbedPlugin.keyFigureEmbedPlugin,
+  'contact-block': _contactBlockEmbedPlugin.contactBlockEmbedPlugin,
+  'campaign-block': _campaignBlockPlugin.campaignBlockPlugin
 };
 exports.embedPlugins = embedPlugins;

package/lib/plugins/olPlugin.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.olPlugin = void 0;
+var _ui = require("@ndla/ui");
 var _htmlReactParser = require("html-react-parser");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -27,8 +28,7 @@ var olPlugin = function olPlugin(node, opts) {
   var classes = [(_node$attribs$class = node.attribs["class"]) !== null && _node$attribs$class !== void 0 ? _node$attribs$class : false, letterClass, numClass].filter(function (c) {
     return !!c;
   }).join(' ');
-  return (0, _jsxRuntime.jsx)("ol", _objectSpread(_objectSpread({}, props), {}, {
-    "data-type": undefined,
+  return (0, _jsxRuntime.jsx)(_ui.OrderedList, _objectSpread(_objectSpread({}, props), {}, {
     className: classes.length ? classes : undefined,
     children: (0, _htmlReactParser.domToReact)(node.children, opts)
   }));

package/lib/plugins/types.d.ts

@@ -6,12 +6,17 @@
  *
  */
 /// <reference types="react" />
+import { HeartButtonType } from '@ndla/ui';
 import { Element, HTMLReactParserOptions } from 'html-react-parser';
+export interface DynamicComponents {
+    heartButton?: HeartButtonType;
+}
 export interface TransformOptions {
     isOembed?: boolean;
     subject?: string;
     path?: string;
     previewAlt?: boolean;
     frontendDomain?: string;
+    components?: DynamicComponents;
 }
 export type PluginType = (element: Element, options: HTMLReactParserOptions, metaData: TransformOptions) => JSX.Element | undefined | null;

package/lib/plugins/ulPlugin.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ulPlugin = void 0;
+var _ui = require("@ndla/ui");
 var _htmlReactParser = require("html-react-parser");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -25,8 +26,7 @@ var ulPlugin = function ulPlugin(node, opts) {
     var classes = [(_node$attribs$class = node.attribs["class"]) !== null && _node$attribs$class !== void 0 ? _node$attribs$class : '', 'o-list--two-columns'].filter(function (c) {
       return !!c;
     }).join(' ');
-    return (0, _jsxRuntime.jsx)("ul", _objectSpread(_objectSpread({}, props), {}, {
-      "data-type": undefined,
+    return (0, _jsxRuntime.jsx)(_ui.UnOrderedList, _objectSpread(_objectSpread({}, props), {}, {
       className: classes,
       children: (0, _htmlReactParser.domToReact)(node.children, opts)
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/article-converter",
-  "version": "1.1.5",
+  "version": "2.0.0",
   "description": "Transforms NDLA articles into extended html versions",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -27,11 +27,11 @@
     "src"
   ],
   "devDependencies": {
-    "@ndla/types-embed": "^1.1.1"
+    "@ndla/types-embed": "^2.0.0"
   },
   "dependencies": {
-    "@ndla/code": "^2.1.42",
-    "@ndla/ui": "^36.0.2",
+    "@ndla/code": "^2.2.0",
+    "@ndla/ui": "^37.0.0",
     "html-react-parser": "^3.0.8",
     "lodash": "^4.17.20"
   },
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "486edbc7b92bc8fc182669cec1c259438215e3cc"
+  "gitHead": "3961942d13c313b37bba92395f6a430ed31dc954"
 }

package/src/index.ts

@@ -8,4 +8,4 @@
 
 export { default as transform } from './transform';
 export { default as extractEmbedMeta } from './extractEmbedMeta';
-export type { TransformOptions } from './plugins/types';
+export type { TransformOptions, DynamicComponents } from './plugins/types';

package/src/plugins/embed/KeyFigureEmbedPlugin.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { attributesToProps } from 'html-react-parser';
+import { KeyFigureMetaData } from '@ndla/types-embed';
+import { KeyFigure } from '@ndla/ui';
+import { PluginType } from '../types';
+
+export const keyFigureEmbedPlugin: PluginType = (element, _) => {
+  const props = attributesToProps(element.attribs);
+  const data = JSON.parse(props['data-json']) as KeyFigureMetaData;
+  const { title, subtitle } = data.embedData;
+  return (
+    <KeyFigure
+      title={title}
+      subtitle={subtitle}
+      image={
+        data.status === 'success'
+          ? { src: data.data.metaImage?.image.imageUrl, alt: data.data.metaImage?.alttext.alttext }
+          : undefined
+      }
+    />
+  );
+};

package/src/plugins/embed/audioEmbedPlugin.tsx

@@ -14,5 +14,5 @@ import { PluginType } from '../types';
 export const audioEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props['data-json']) as AudioMetaData;
-  return <AudioEmbed embed={data} articlePath={opts.path} />;
+  return <AudioEmbed embed={data} heartButton={opts.components?.heartButton} />;
 };

package/src/plugins/embed/blogPostEmbedPlugin.tsx

@@ -25,7 +25,7 @@ export const blogPostEmbedPlugin: PluginType = (element) => {
       size={size}
       metaImage={{
         alt: '',
-        url: data.status === 'success' ? data.data.metaImage?.imageUrl ?? errorSvgSrc : errorSvgSrc,
+        url: data.status === 'success' ? data.data.metaImage?.image.imageUrl ?? errorSvgSrc : errorSvgSrc,
       }}
     />
   );

package/src/plugins/embed/brightcoveEmbedPlugin.tsx

@@ -11,8 +11,8 @@ import { BrightcoveMetaData } from '@ndla/types-embed';
 import { BrightcoveEmbed } from '@ndla/ui';
 import { PluginType } from '../types';
 
-export const brightcoveEmbedPlugin: PluginType = (element) => {
+export const brightcoveEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props['data-json']) as BrightcoveMetaData;
-  return <BrightcoveEmbed embed={data} />;
+  return <BrightcoveEmbed embed={data} heartButton={opts.components?.heartButton} />;
 };

package/src/plugins/embed/campaignBlockPlugin.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { attributesToProps } from 'html-react-parser';
+import { CampaignBlockMetaData } from '@ndla/types-embed';
+import { CampaignBlock } from '@ndla/ui';
+import { PluginType } from '../types';
+
+export const campaignBlockPlugin: PluginType = (element) => {
+  const props = attributesToProps(element.attribs);
+  const data = JSON.parse(props['data-json']) as CampaignBlockMetaData;
+  const embed = data.embedData;
+  return (
+    <CampaignBlock
+      title={{ title: embed.title, language: embed.titleLanguage }}
+      description={{ text: embed.description, language: embed.descriptionLanguage }}
+      url={{ url: embed.url, text: embed.urlText }}
+      imageAfter={
+        data.status === 'success' && data.data.imageAfter
+          ? { src: data.data.imageAfter.image.imageUrl, alt: data.data.imageAfter.alttext.alttext }
+          : undefined
+      }
+      imageBefore={
+        data.status === 'success' && data.data.imageBefore
+          ? { src: data.data.imageBefore.image.imageUrl, alt: data.data.imageBefore.alttext.alttext }
+          : undefined
+      }
+    />
+  );
+};

package/src/plugins/embed/conceptEmbedPlugin.tsx

@@ -11,8 +11,8 @@ import { ConceptMetaData } from '@ndla/types-embed';
 import { ConceptEmbed } from '@ndla/ui';
 import { PluginType } from '../types';
 
-export const conceptEmbedPlugin: PluginType = (element) => {
+export const conceptEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props['data-json']) as ConceptMetaData;
-  return <ConceptEmbed embed={data} fullWidth />;
+  return <ConceptEmbed embed={data} fullWidth heartButton={opts.components?.heartButton} />;
 };

package/src/plugins/embed/imageEmbedPlugin.tsx

@@ -14,5 +14,5 @@ import { PluginType } from '../types';
 export const imageEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props['data-json']) as ImageMetaData;
-  return <ImageEmbed embed={data} articlePath={opts.path} previewAlt={opts.previewAlt} />;
+  return <ImageEmbed embed={data} previewAlt={opts.previewAlt} heartButton={opts.components?.heartButton} />;
 };

package/src/plugins/embed/index.ts

@@ -21,8 +21,9 @@ import { conceptListEmbedPlugin } from './conceptListEmbedPlugin';
 import { fileEmbedPlugin } from './fileEmbedPlugin';
 import { codeEmbedPlugin } from './codeEmbedPlugin';
 import { blogPostEmbedPlugin } from './blogPostEmbedPlugin';
-import { keyPerformanceIndicatorEmbedPlugin } from './keyPerformanceIndicatorEmbedPlugin';
+import { keyFigureEmbedPlugin } from './KeyFigureEmbedPlugin';
 import { contactBlockEmbedPlugin } from './contactBlockEmbedPlugin';
+import { campaignBlockPlugin } from './campaignBlockPlugin';
 
 export const embedPlugins: Record<string, PluginType> = {
   image: imageEmbedPlugin,
@@ -39,6 +40,7 @@ export const embedPlugins: Record<string, PluginType> = {
   'concept-list': conceptListEmbedPlugin,
   'blog-post': blogPostEmbedPlugin,
   file: fileEmbedPlugin,
-  'key-performance-indicator': keyPerformanceIndicatorEmbedPlugin,
+  'key-figure': keyFigureEmbedPlugin,
   'contact-block': contactBlockEmbedPlugin,
+  'campaign-block': campaignBlockPlugin,
 };

package/src/plugins/olPlugin.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+import { OrderedList } from '@ndla/ui';
 import { attributesToProps, domToReact } from 'html-react-parser';
 import { PluginType } from './types';
 export const olPlugin: PluginType = (node, opts) => {
@@ -16,8 +17,8 @@ export const olPlugin: PluginType = (node, opts) => {
   const classes = [node.attribs.class ?? false, letterClass, numClass].filter((c): c is string => !!c).join(' ');
 
   return (
-    <ol {...props} data-type={undefined} className={classes.length ? classes : undefined}>
+    <OrderedList {...props} className={classes.length ? classes : undefined}>
       {domToReact(node.children, opts)}
-    </ol>
+    </OrderedList>
   );
 };

package/src/plugins/types.ts

@@ -6,14 +6,20 @@
  *
  */
 
+import { HeartButtonType } from '@ndla/ui';
 import { Element, HTMLReactParserOptions } from 'html-react-parser';
 
+export interface DynamicComponents {
+  heartButton?: HeartButtonType;
+}
+
 export interface TransformOptions {
   isOembed?: boolean;
   subject?: string;
   path?: string;
   previewAlt?: boolean;
   frontendDomain?: string;
+  components?: DynamicComponents;
 }
 
 export type PluginType = (

package/src/plugins/ulPlugin.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+import { UnOrderedList } from '@ndla/ui';
 import { attributesToProps, domToReact } from 'html-react-parser';
 import { PluginType } from './types';
 export const ulPlugin: PluginType = (node, opts) => {
@@ -13,9 +14,9 @@ export const ulPlugin: PluginType = (node, opts) => {
     const props = attributesToProps(node.attribs);
     const classes = [node.attribs.class ?? '', 'o-list--two-columns'].filter((c) => !!c).join(' ');
     return (
-      <ul {...props} data-type={undefined} className={classes}>
+      <UnOrderedList {...props} className={classes}>
         {domToReact(node.children, opts)}
-      </ul>
+      </UnOrderedList>
     );
   }
 

package/es/plugins/embed/keyPerformanceIndicatorEmbedPlugin.js

@@ -1,23 +0,0 @@
-/*
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { KeyPerformanceIndicator } from '@ndla/ui';
-import { attributesToProps } from 'html-react-parser';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-export var keyPerformanceIndicatorEmbedPlugin = function keyPerformanceIndicatorEmbedPlugin(element, _, opts) {
-  var props = attributesToProps(element.attribs);
-  var data = JSON.parse(props['data-json']);
-  var _data$embedData = data.embedData,
-    title = _data$embedData.title,
-    subTitle = _data$embedData.subTitle;
-  return _jsx(KeyPerformanceIndicator, {
-    title: title,
-    subTitle: subTitle,
-    image: data.status === 'success' ? data.data.metaImage : undefined
-  });
-};

package/lib/plugins/embed/keyPerformanceIndicatorEmbedPlugin.d.ts

@@ -1,2 +0,0 @@
-import { PluginType } from '../types';
-export declare const keyPerformanceIndicatorEmbedPlugin: PluginType;

package/lib/plugins/embed/keyPerformanceIndicatorEmbedPlugin.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.keyPerformanceIndicatorEmbedPlugin = void 0;
-var _ui = require("@ndla/ui");
-var _htmlReactParser = require("html-react-parser");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/*
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-var keyPerformanceIndicatorEmbedPlugin = function keyPerformanceIndicatorEmbedPlugin(element, _, opts) {
-  var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
-  var data = JSON.parse(props['data-json']);
-  var _data$embedData = data.embedData,
-    title = _data$embedData.title,
-    subTitle = _data$embedData.subTitle;
-  return (0, _jsxRuntime.jsx)(_ui.KeyPerformanceIndicator, {
-    title: title,
-    subTitle: subTitle,
-    image: data.status === 'success' ? data.data.metaImage : undefined
-  });
-};
-exports.keyPerformanceIndicatorEmbedPlugin = keyPerformanceIndicatorEmbedPlugin;

package/src/plugins/embed/keyPerformanceIndicatorEmbedPlugin.tsx

@@ -1,25 +0,0 @@
-/*
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { KeyPerformanceIndicator } from '@ndla/ui';
-import { attributesToProps } from 'html-react-parser';
-import { KeyPerformanceIndicatorMetaData } from '@ndla/types-embed';
-import { PluginType } from '../types';
-
-export const keyPerformanceIndicatorEmbedPlugin: PluginType = (element, _, opts) => {
-  const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props['data-json']) as KeyPerformanceIndicatorMetaData;
-  const { title, subTitle } = data.embedData;
-  return (
-    <KeyPerformanceIndicator
-      title={title}
-      subTitle={subTitle}
-      image={data.status === 'success' ? data.data.metaImage : undefined}
-    />
-  );
-};