@ndla/article-converter 9.0.16-alpha.0 → 9.0.18-alpha.0

package/es/plugins/embed/contactBlockEmbedPlugin.js

@@ -7,8 +7,14 @@
  */
 
 import { attributesToProps } from "html-react-parser";
-import { ContactBlock } from "@ndla/ui";
+import { ContactBlock, contactBlockBackgrounds } from "@ndla/ui";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function isBackground(background) {
+  return contactBlockBackgrounds.includes(background ?? "");
+}
+const parseBackground = background => {
+  if (isBackground(background)) return background;
+};
 export const contactBlockEmbedPlugin = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
   const embedData = JSON.parse(props["data-json"]);
@@ -16,21 +22,19 @@ export const contactBlockEmbedPlugin = (element, _, opts) => {
     name,
     email,
     description,
-    blob,
-    blobColor,
+    background,
     jobTitle,
     alt
   } = embedData.embedData;
+  const parsedBackground = parseBackground(background);
   return _jsx(ContactBlock, {
     image: embedData.status === "success" ? embedData.data.image : undefined,
     embedAlt: alt,
     description: description,
     email: email,
-    blobColor: blobColor,
     jobTitle: jobTitle,
     name: name,
-    blob: blob,
     lang: opts.articleLanguage,
-    imageCanonicalUrl: opts.canonicalUrls?.image
+    backgroundColor: parsedBackground
   });
 };

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

@@ -5,5 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import { ContactBlockBackground } from "@ndla/ui";
 import { PluginType } from "../types";
+export declare function isBackground(background?: string): background is ContactBlockBackground;
 export declare const contactBlockEmbedPlugin: PluginType;

package/lib/plugins/embed/contactBlockEmbedPlugin.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.contactBlockEmbedPlugin = void 0;
+exports.isBackground = isBackground;
 var _htmlReactParser = require("html-react-parser");
 var _ui = require("@ndla/ui");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -15,6 +16,12 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  *
  */
 
+function isBackground(background) {
+  return _ui.contactBlockBackgrounds.includes(background ?? "");
+}
+const parseBackground = background => {
+  if (isBackground(background)) return background;
+};
 const contactBlockEmbedPlugin = (element, _, opts) => {
   const props = (0, _htmlReactParser.attributesToProps)(element.attribs);
   const embedData = JSON.parse(props["data-json"]);
@@ -22,22 +29,20 @@ const contactBlockEmbedPlugin = (element, _, opts) => {
     name,
     email,
     description,
-    blob,
-    blobColor,
+    background,
     jobTitle,
     alt
   } = embedData.embedData;
+  const parsedBackground = parseBackground(background);
   return (0, _jsxRuntime.jsx)(_ui.ContactBlock, {
     image: embedData.status === "success" ? embedData.data.image : undefined,
     embedAlt: alt,
     description: description,
     email: email,
-    blobColor: blobColor,
     jobTitle: jobTitle,
     name: name,
-    blob: blob,
     lang: opts.articleLanguage,
-    imageCanonicalUrl: opts.canonicalUrls?.image
+    backgroundColor: parsedBackground
   });
 };
 exports.contactBlockEmbedPlugin = contactBlockEmbedPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/article-converter",
-  "version": "9.0.16-alpha.0",
+  "version": "9.0.18-alpha.0",
   "description": "Transforms NDLA articles into extended html versions",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -28,11 +28,11 @@
   ],
   "devDependencies": {
     "@ndla/types-backend": "^0.2.86",
-    "@ndla/types-embed": "^4.1.8"
+    "@ndla/types-embed": "^5.0.0-alpha.0"
   },
   "dependencies": {
-    "@ndla/primitives": "^0.0.19",
-    "@ndla/ui": "^55.0.16-alpha.0",
+    "@ndla/primitives": "^0.0.21",
+    "@ndla/ui": "^55.0.18-alpha.0",
     "html-react-parser": "^5.1.8"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b05b7016560891b2867811c4420041e6932003cc"
+  "gitHead": "a5f4f60d7a65d6f0aa91e357e080584cda8a70f3"
 }

package/src/plugins/embed/contactBlockEmbedPlugin.tsx

@@ -8,25 +8,32 @@
 
 import { attributesToProps } from "html-react-parser";
 import { ContactBlockMetaData } from "@ndla/types-embed";
-import { ContactBlock } from "@ndla/ui";
+import { ContactBlock, contactBlockBackgrounds, ContactBlockBackground } from "@ndla/ui";
 import { PluginType } from "../types";
 
+export function isBackground(background?: string): background is ContactBlockBackground {
+  return (contactBlockBackgrounds as readonly string[]).includes(background ?? "");
+}
+const parseBackground = (background: string | undefined): ContactBlockBackground | undefined => {
+  if (isBackground(background)) return background;
+};
+
 export const contactBlockEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
   const embedData = JSON.parse(props["data-json"] as string) as ContactBlockMetaData;
-  const { name, email, description, blob, blobColor, jobTitle, alt } = embedData.embedData;
+  const { name, email, description, background, jobTitle, alt } = embedData.embedData;
+  const parsedBackground = parseBackground(background);
+
   return (
     <ContactBlock
       image={embedData.status === "success" ? embedData.data.image : undefined}
       embedAlt={alt}
       description={description}
       email={email}
-      blobColor={blobColor}
       jobTitle={jobTitle}
       name={name}
-      blob={blob}
       lang={opts.articleLanguage}
-      imageCanonicalUrl={opts.canonicalUrls?.image}
+      backgroundColor={parsedBackground}
     />
   );
 };