@ndla/article-converter 9.0.12-alpha.0 → 9.0.14-alpha.0

package/es/plugins/blockquotePlugin.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2024-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, domToReact } from "html-react-parser";
+import { BlockQuote } from "@ndla/primitives";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export const blockquotePlugin = (node, opts) => {
+  const props = attributesToProps(node.attribs);
+  return _jsx(BlockQuote, {
+    ...props,
+    children: domToReact(node.children, opts)
+  });
+};

package/es/plugins/copyParagraphPlugin.js

@@ -10,9 +10,8 @@ import { domToReact } from "html-react-parser";
 import { CopyParagraphButton } from "@ndla/ui";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export const copyParagraphPlugin = (node, converterOpts, opts) => {
-  var _parent$attribs;
   const parent = node.parent;
-  if ((parent === null || parent === void 0 ? void 0 : parent.name) === "section" || (parent === null || parent === void 0 ? void 0 : parent.name) === "div" && Object.keys((_parent$attribs = parent.attribs) !== null && _parent$attribs !== void 0 ? _parent$attribs : {}).length === 0 || (parent === null || parent === void 0 ? void 0 : parent.name) === "ndlaembed" && parent.attribs["data-resource"] === "uu-disclaimer") {
+  if (parent?.name === "section" || parent?.name === "div" && Object.keys(parent.attribs ?? {}).length === 0 || parent?.name === "ndlaembed" && parent.attribs["data-resource"] === "uu-disclaimer") {
     return _jsx(CopyParagraphButton, {
       copyText: node.attribs["data-text"],
       lang: opts.articleLanguage,

package/es/plugins/{ddPlugin.js → detailsPlugin.js}

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * Copyright (c) 2024-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,13 +7,12 @@
  */
 
 import { attributesToProps, domToReact } from "html-react-parser";
-import { DefinitionDescription } from "@ndla/ui";
+import { ExpandableBox } from "@ndla/primitives";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-export const ddPlugin = (node, converterOpts, opts) => {
+export const detailsPlugin = (node, converterOpts) => {
   const props = attributesToProps(node.attribs);
-  return _jsx(DefinitionDescription, {
+  return _jsx(ExpandableBox, {
     ...props,
-    lang: opts.articleLanguage,
     children: domToReact(node.children, converterOpts)
   });
 };

package/es/plugins/divPlugin.js

@@ -7,7 +7,8 @@
  */
 
 import { domToReact, attributesToProps } from "html-react-parser";
-import { FileList, RelatedArticleList, Grid, GridParallaxItem, FramedContent } from "@ndla/ui";
+import { FramedContent } from "@ndla/primitives";
+import { FileList, RelatedArticleList, Grid, GridParallaxItem } from "@ndla/ui";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export const divPlugin = (node, opts) => {
   if (node.attribs["data-type"] === "framed-content" || node.attribs.class === "c-bodybox") {

package/es/plugins/{dtPlugin.js → dlPlugin.js}

@@ -7,11 +7,11 @@
  */
 
 import { attributesToProps, domToReact } from "html-react-parser";
-import { DefinitionTerm } from "@ndla/ui";
+import { DefinitionList } from "@ndla/primitives";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-export const dtPlugin = (node, converterOpts, opts) => {
+export const dlPlugin = (node, converterOpts, opts) => {
   const props = attributesToProps(node.attribs);
-  return _jsx(DefinitionTerm, {
+  return _jsx(DefinitionList, {
     ...props,
     lang: opts.articleLanguage,
     children: domToReact(node.children, converterOpts)

package/es/plugins/embed/blogPostEmbedPlugin.js

@@ -9,9 +9,8 @@
 import { attributesToProps } from "html-react-parser";
 import { BlogPostV2 } from "@ndla/ui";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-export const errorSvgSrc = "data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E";
+export const errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
 export const blogPostEmbedPlugin = (element, _, opts) => {
-  var _data$data$metaImage$, _data$data$metaImage;
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props["data-json"]);
   const {
@@ -29,7 +28,7 @@ export const blogPostEmbedPlugin = (element, _, opts) => {
     path: opts.path,
     metaImage: {
       alt: alt ? 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.image.imageUrl) !== null && _data$data$metaImage$ !== void 0 ? _data$data$metaImage$ : errorSvgSrc : errorSvgSrc
+      url: data.status === "success" ? data.data.metaImage?.image.imageUrl ?? errorSvgSrc : errorSvgSrc
     }
   });
 };

package/es/plugins/embed/conceptEmbedPlugin.js

@@ -14,7 +14,6 @@ export const conceptEmbedPlugin = (element, _, opts) => {
   const data = JSON.parse(props["data-json"]);
   return _jsx(ConceptEmbed, {
     embed: data,
-    fullWidth: true,
     lang: opts.articleLanguage,
     renderContext: opts.renderContext
   });

package/es/plugins/embed/contactBlockEmbedPlugin.js

@@ -10,7 +10,6 @@ import { attributesToProps } from "html-react-parser";
 import { ContactBlock } from "@ndla/ui";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export const contactBlockEmbedPlugin = (element, _, opts) => {
-  var _opts$canonicalUrls;
   const props = attributesToProps(element.attribs);
   const embedData = JSON.parse(props["data-json"]);
   const {
@@ -32,6 +31,6 @@ export const contactBlockEmbedPlugin = (element, _, opts) => {
     name: name,
     blob: blob,
     lang: opts.articleLanguage,
-    imageCanonicalUrl: (_opts$canonicalUrls = opts.canonicalUrls) === null || _opts$canonicalUrls === void 0 ? void 0 : _opts$canonicalUrls.image
+    imageCanonicalUrl: opts.canonicalUrls?.image
   });
 };

package/es/plugins/embed/imageEmbedPlugin.js

@@ -10,12 +10,9 @@ import { attributesToProps } from "html-react-parser";
 import { ImageEmbed } from "@ndla/ui";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export const imageEmbedPlugin = (element, _, opts) => {
-  var _element$parentNode;
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props["data-json"]);
-  const inGrid = ((_element$parentNode = element.parentNode) === null || _element$parentNode === void 0 || (_element$parentNode = _element$parentNode.parentNode) === null || _element$parentNode === void 0 || (_element$parentNode = _element$parentNode.attribs) === null || _element$parentNode === void 0 ? void 0 : _element$parentNode["data-type"]) === "grid";
   return _jsx(ImageEmbed, {
-    inGrid: inGrid,
     embed: data,
     previewAlt: opts.previewAlt,
     lang: opts.articleLanguage,

package/es/plugins/index.js

@@ -8,16 +8,18 @@
 
 import { anchorPlugin } from "./anchorPlugin";
 import { asidePlugin } from "./asidePlugin";
+import { blockquotePlugin } from "./blockquotePlugin";
 import { copyParagraphPlugin } from "./copyParagraphPlugin";
-import { ddPlugin } from "./ddPlugin";
+import { detailsPlugin } from "./detailsPlugin";
 import { divPlugin } from "./divPlugin";
-import { dtPlugin } from "./dtPlugin";
+import { dlPlugin } from "./dlPlugin";
 import { h3Plugin } from "./h3Plugin";
 import { mathPlugin } from "./mathPlugin";
 import { navPlugin } from "./navPlugin";
 import { anchorPlugin as oembedAnchorPlugin } from "./oembed/anchorPlugin";
 import { olPlugin } from "./olPlugin";
 import { paragraphPlugin } from "./paragraphPlugin";
+import { summaryPlugin } from "./summaryPlugin";
 import { tablePlugin } from "./tablePlugin";
 import { ulPlugin } from "./ulPlugin";
 export const basePlugins = {
@@ -30,10 +32,12 @@ export const basePlugins = {
   table: tablePlugin,
   aside: asidePlugin,
   ul: ulPlugin,
-  dd: ddPlugin,
-  dt: dtPlugin,
   nav: navPlugin,
-  a: anchorPlugin
+  a: anchorPlugin,
+  summary: summaryPlugin,
+  details: detailsPlugin,
+  dl: dlPlugin,
+  blockquote: blockquotePlugin
 };
 export const oembedPlugins = {
   ...basePlugins,

package/es/plugins/olPlugin.js

@@ -10,12 +10,11 @@ import { attributesToProps, domToReact } from "html-react-parser";
 import { OrderedList } from "@ndla/ui";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export const olPlugin = (node, converterOpts, opts) => {
-  var _node$attribs$class;
   const props = attributesToProps(node.attribs);
   const letterClass = node.attribs["data-type"] === "letters" ? "ol-list--roman" : false;
   const num = node.attribs.start;
-  const numClass = num ? "ol-reset-".concat(num) : false;
-  const classes = [(_node$attribs$class = node.attribs.class) !== null && _node$attribs$class !== void 0 ? _node$attribs$class : false, letterClass, numClass].filter(c => !!c).join(" ");
+  const numClass = num ? `ol-reset-${num}` : false;
+  const classes = [node.attribs.class ?? false, letterClass, numClass].filter(c => !!c).join(" ");
   return _jsx(OrderedList, {
     ...props,
     className: classes.length ? classes : undefined,

package/es/plugins/summaryPlugin.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2024-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, domToReact } from "html-react-parser";
+import { ExpandableBoxSummary } from "@ndla/primitives";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export const summaryPlugin = (node, converterOpts) => {
+  const props = attributesToProps(node.attribs);
+  return _jsx(ExpandableBoxSummary, {
+    ...props,
+    children: domToReact(node.children, converterOpts)
+  });
+};

package/es/plugins/tablePlugin.js

@@ -7,7 +7,7 @@
  */
 
 import { attributesToProps, domToReact } from "html-react-parser";
-import { Table } from "@ndla/ui";
+import { Table } from "@ndla/primitives";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export const tablePlugin = (node, converterOpts, opts) => {
   const props = attributesToProps(node.attribs);

package/es/transform.js

@@ -12,7 +12,7 @@ import { basePlugins, oembedPlugins } from "./plugins";
 import { embedPlugins } from "./plugins/embed";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const transform = (content, opts) => {
-  const plugins = opts !== null && opts !== void 0 && opts.isOembed ? oembedPlugins : basePlugins;
+  const plugins = opts?.isOembed ? oembedPlugins : basePlugins;
   const options = {
     replace: node => {
       if (!("attribs" in node)) {

package/lib/plugins/blockquotePlugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2024-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 blockquotePlugin: PluginType;

package/lib/plugins/blockquotePlugin.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockquotePlugin = void 0;
+var _htmlReactParser = require("html-react-parser");
+var _primitives = require("@ndla/primitives");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const blockquotePlugin = (node, opts) => {
+  const props = (0, _htmlReactParser.attributesToProps)(node.attribs);
+  return (0, _jsxRuntime.jsx)(_primitives.BlockQuote, {
+    ...props,
+    children: (0, _htmlReactParser.domToReact)(node.children, opts)
+  });
+};
+exports.blockquotePlugin = blockquotePlugin;

package/lib/plugins/copyParagraphPlugin.js

@@ -16,9 +16,8 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 
 const copyParagraphPlugin = (node, converterOpts, opts) => {
-  var _parent$attribs;
   const parent = node.parent;
-  if ((parent === null || parent === void 0 ? void 0 : parent.name) === "section" || (parent === null || parent === void 0 ? void 0 : parent.name) === "div" && Object.keys((_parent$attribs = parent.attribs) !== null && _parent$attribs !== void 0 ? _parent$attribs : {}).length === 0 || (parent === null || parent === void 0 ? void 0 : parent.name) === "ndlaembed" && parent.attribs["data-resource"] === "uu-disclaimer") {
+  if (parent?.name === "section" || parent?.name === "div" && Object.keys(parent.attribs ?? {}).length === 0 || parent?.name === "ndlaembed" && parent.attribs["data-resource"] === "uu-disclaimer") {
     return (0, _jsxRuntime.jsx)(_ui.CopyParagraphButton, {
       copyText: node.attribs["data-text"],
       lang: opts.articleLanguage,

package/lib/plugins/{ddPlugin.d.ts → detailsPlugin.d.ts}

@@ -1,9 +1,9 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * Copyright (c) 2024-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 ddPlugin: PluginType;
+export declare const detailsPlugin: PluginType;

package/lib/plugins/{ddPlugin.js → detailsPlugin.js}

@@ -3,24 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ddPlugin = void 0;
+exports.detailsPlugin = void 0;
 var _htmlReactParser = require("html-react-parser");
-var _ui = require("@ndla/ui");
+var _primitives = require("@ndla/primitives");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
- * Copyright (c) 2023-present, NDLA.
+ * Copyright (c) 2024-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
  *
  */
 
-const ddPlugin = (node, converterOpts, opts) => {
+const detailsPlugin = (node, converterOpts) => {
   const props = (0, _htmlReactParser.attributesToProps)(node.attribs);
-  return (0, _jsxRuntime.jsx)(_ui.DefinitionDescription, {
+  return (0, _jsxRuntime.jsx)(_primitives.ExpandableBox, {
     ...props,
-    lang: opts.articleLanguage,
     children: (0, _htmlReactParser.domToReact)(node.children, converterOpts)
   });
 };
-exports.ddPlugin = ddPlugin;
+exports.detailsPlugin = detailsPlugin;

package/lib/plugins/divPlugin.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.divPlugin = void 0;
 var _htmlReactParser = require("html-react-parser");
+var _primitives = require("@ndla/primitives");
 var _ui = require("@ndla/ui");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
@@ -17,7 +18,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
 const divPlugin = (node, opts) => {
   if (node.attribs["data-type"] === "framed-content" || node.attribs.class === "c-bodybox") {
-    return (0, _jsxRuntime.jsx)(_ui.FramedContent, {
+    return (0, _jsxRuntime.jsx)(_primitives.FramedContent, {
       children: (0, _htmlReactParser.domToReact)(node.children, opts)
     });
   }

package/lib/plugins/{dtPlugin.d.ts → dlPlugin.d.ts}

@@ -6,4 +6,4 @@
  *
  */
 import { PluginType } from "./types";
-export declare const dtPlugin: PluginType;
+export declare const dlPlugin: PluginType;

package/lib/plugins/{dtPlugin.js → dlPlugin.js}

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dtPlugin = void 0;
+exports.dlPlugin = void 0;
 var _htmlReactParser = require("html-react-parser");
-var _ui = require("@ndla/ui");
+var _primitives = require("@ndla/primitives");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Copyright (c) 2023-present, NDLA.
@@ -15,12 +15,12 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  *
  */
 
-const dtPlugin = (node, converterOpts, opts) => {
+const dlPlugin = (node, converterOpts, opts) => {
   const props = (0, _htmlReactParser.attributesToProps)(node.attribs);
-  return (0, _jsxRuntime.jsx)(_ui.DefinitionTerm, {
+  return (0, _jsxRuntime.jsx)(_primitives.DefinitionList, {
     ...props,
     lang: opts.articleLanguage,
     children: (0, _htmlReactParser.domToReact)(node.children, converterOpts)
   });
 };
-exports.dtPlugin = dtPlugin;
+exports.dlPlugin = dlPlugin;

package/lib/plugins/embed/blogPostEmbedPlugin.js

@@ -15,9 +15,8 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  *
  */
 
-const errorSvgSrc = exports.errorSvgSrc = "data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E";
+const errorSvgSrc = exports.errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
 const blogPostEmbedPlugin = (element, _, opts) => {
-  var _data$data$metaImage$, _data$data$metaImage;
   const props = (0, _htmlReactParser.attributesToProps)(element.attribs);
   const data = JSON.parse(props["data-json"]);
   const {
@@ -35,7 +34,7 @@ const blogPostEmbedPlugin = (element, _, opts) => {
     path: opts.path,
     metaImage: {
       alt: alt ? 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.image.imageUrl) !== null && _data$data$metaImage$ !== void 0 ? _data$data$metaImage$ : errorSvgSrc : errorSvgSrc
+      url: data.status === "success" ? data.data.metaImage?.image.imageUrl ?? errorSvgSrc : errorSvgSrc
     }
   });
 };

package/lib/plugins/embed/conceptEmbedPlugin.js

@@ -20,7 +20,6 @@ const conceptEmbedPlugin = (element, _, opts) => {
   const data = JSON.parse(props["data-json"]);
   return (0, _jsxRuntime.jsx)(_ui.ConceptEmbed, {
     embed: data,
-    fullWidth: true,
     lang: opts.articleLanguage,
     renderContext: opts.renderContext
   });

package/lib/plugins/embed/contactBlockEmbedPlugin.js

@@ -16,7 +16,6 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 
 const contactBlockEmbedPlugin = (element, _, opts) => {
-  var _opts$canonicalUrls;
   const props = (0, _htmlReactParser.attributesToProps)(element.attribs);
   const embedData = JSON.parse(props["data-json"]);
   const {
@@ -38,7 +37,7 @@ const contactBlockEmbedPlugin = (element, _, opts) => {
     name: name,
     blob: blob,
     lang: opts.articleLanguage,
-    imageCanonicalUrl: (_opts$canonicalUrls = opts.canonicalUrls) === null || _opts$canonicalUrls === void 0 ? void 0 : _opts$canonicalUrls.image
+    imageCanonicalUrl: opts.canonicalUrls?.image
   });
 };
 exports.contactBlockEmbedPlugin = contactBlockEmbedPlugin;

package/lib/plugins/embed/imageEmbedPlugin.js

@@ -16,12 +16,9 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 
 const imageEmbedPlugin = (element, _, opts) => {
-  var _element$parentNode;
   const props = (0, _htmlReactParser.attributesToProps)(element.attribs);
   const data = JSON.parse(props["data-json"]);
-  const inGrid = ((_element$parentNode = element.parentNode) === null || _element$parentNode === void 0 || (_element$parentNode = _element$parentNode.parentNode) === null || _element$parentNode === void 0 || (_element$parentNode = _element$parentNode.attribs) === null || _element$parentNode === void 0 ? void 0 : _element$parentNode["data-type"]) === "grid";
   return (0, _jsxRuntime.jsx)(_ui.ImageEmbed, {
-    inGrid: inGrid,
     embed: data,
     previewAlt: opts.previewAlt,
     lang: opts.articleLanguage,

package/lib/plugins/index.js

@@ -6,16 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.oembedPlugins = exports.basePlugins = void 0;
 var _anchorPlugin = require("./anchorPlugin");
 var _asidePlugin = require("./asidePlugin");
+var _blockquotePlugin = require("./blockquotePlugin");
 var _copyParagraphPlugin = require("./copyParagraphPlugin");
-var _ddPlugin = require("./ddPlugin");
+var _detailsPlugin = require("./detailsPlugin");
 var _divPlugin = require("./divPlugin");
-var _dtPlugin = require("./dtPlugin");
+var _dlPlugin = require("./dlPlugin");
 var _h3Plugin = require("./h3Plugin");
 var _mathPlugin = require("./mathPlugin");
 var _navPlugin = require("./navPlugin");
 var _anchorPlugin2 = require("./oembed/anchorPlugin");
 var _olPlugin = require("./olPlugin");
 var _paragraphPlugin = require("./paragraphPlugin");
+var _summaryPlugin = require("./summaryPlugin");
 var _tablePlugin = require("./tablePlugin");
 var _ulPlugin = require("./ulPlugin");
 /**
@@ -36,10 +38,12 @@ const basePlugins = exports.basePlugins = {
   table: _tablePlugin.tablePlugin,
   aside: _asidePlugin.asidePlugin,
   ul: _ulPlugin.ulPlugin,
-  dd: _ddPlugin.ddPlugin,
-  dt: _dtPlugin.dtPlugin,
   nav: _navPlugin.navPlugin,
-  a: _anchorPlugin.anchorPlugin
+  a: _anchorPlugin.anchorPlugin,
+  summary: _summaryPlugin.summaryPlugin,
+  details: _detailsPlugin.detailsPlugin,
+  dl: _dlPlugin.dlPlugin,
+  blockquote: _blockquotePlugin.blockquotePlugin
 };
 const oembedPlugins = exports.oembedPlugins = {
   ...basePlugins,

package/lib/plugins/olPlugin.js

@@ -16,12 +16,11 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 
 const olPlugin = (node, converterOpts, opts) => {
-  var _node$attribs$class;
   const props = (0, _htmlReactParser.attributesToProps)(node.attribs);
   const letterClass = node.attribs["data-type"] === "letters" ? "ol-list--roman" : false;
   const num = node.attribs.start;
-  const numClass = num ? "ol-reset-".concat(num) : false;
-  const classes = [(_node$attribs$class = node.attribs.class) !== null && _node$attribs$class !== void 0 ? _node$attribs$class : false, letterClass, numClass].filter(c => !!c).join(" ");
+  const numClass = num ? `ol-reset-${num}` : false;
+  const classes = [node.attribs.class ?? false, letterClass, numClass].filter(c => !!c).join(" ");
   return (0, _jsxRuntime.jsx)(_ui.OrderedList, {
     ...props,
     className: classes.length ? classes : undefined,

package/lib/plugins/summaryPlugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2024-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 summaryPlugin: PluginType;

package/lib/plugins/summaryPlugin.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.summaryPlugin = void 0;
+var _htmlReactParser = require("html-react-parser");
+var _primitives = require("@ndla/primitives");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const summaryPlugin = (node, converterOpts) => {
+  const props = (0, _htmlReactParser.attributesToProps)(node.attribs);
+  return (0, _jsxRuntime.jsx)(_primitives.ExpandableBoxSummary, {
+    ...props,
+    children: (0, _htmlReactParser.domToReact)(node.children, converterOpts)
+  });
+};
+exports.summaryPlugin = summaryPlugin;

package/lib/plugins/tablePlugin.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tablePlugin = void 0;
 var _htmlReactParser = require("html-react-parser");
-var _ui = require("@ndla/ui");
+var _primitives = require("@ndla/primitives");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Copyright (c) 2023-present, NDLA.
@@ -17,7 +17,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
 const tablePlugin = (node, converterOpts, opts) => {
   const props = (0, _htmlReactParser.attributesToProps)(node.attribs);
-  return (0, _jsxRuntime.jsx)(_ui.Table, {
+  return (0, _jsxRuntime.jsx)(_primitives.Table, {
     ...props,
     lang: opts.articleLanguage,
     children: (0, _htmlReactParser.domToReact)(node.children, converterOpts)

package/lib/transform.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 
 const transform = (content, opts) => {
-  const plugins = opts !== null && opts !== void 0 && opts.isOembed ? _plugins.oembedPlugins : _plugins.basePlugins;
+  const plugins = opts?.isOembed ? _plugins.oembedPlugins : _plugins.basePlugins;
   const options = {
     replace: node => {
       if (!("attribs" in node)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/article-converter",
-  "version": "9.0.12-alpha.0",
+  "version": "9.0.14-alpha.0",
   "description": "Transforms NDLA articles into extended html versions",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,7 +31,8 @@
     "@ndla/types-embed": "^4.1.8"
   },
   "dependencies": {
-    "@ndla/ui": "^55.0.12-alpha.0",
+    "@ndla/primitives": "^0.0.18",
+    "@ndla/ui": "^55.0.14-alpha.0",
     "html-react-parser": "^5.1.8"
   },
   "peerDependencies": {
@@ -46,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c3254246b993068a867ab9ec9594347d5ebf439"
+  "gitHead": "6fdfbed9f18bbd725c837fb74de2f093e80d5605"
 }

package/src/plugins/blockquotePlugin.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2024-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 { DOMNode, attributesToProps, domToReact } from "html-react-parser";
+import { BlockQuote } from "@ndla/primitives";
+import { PluginType } from "./types";
+
+export const blockquotePlugin: PluginType = (node, opts) => {
+  const props = attributesToProps(node.attribs);
+  return <BlockQuote {...props}>{domToReact(node.children as DOMNode[], opts)}</BlockQuote>;
+};

package/src/plugins/detailsPlugin.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2024-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 { DOMNode, attributesToProps, domToReact } from "html-react-parser";
+import { ExpandableBox } from "@ndla/primitives";
+import { PluginType } from "./types";
+
+export const detailsPlugin: PluginType = (node, converterOpts) => {
+  const props = attributesToProps(node.attribs);
+
+  return <ExpandableBox {...props}>{domToReact(node.children as DOMNode[], converterOpts)}</ExpandableBox>;
+};

package/src/plugins/divPlugin.tsx

@@ -7,7 +7,8 @@
  */
 
 import { domToReact, attributesToProps, Element, DOMNode } from "html-react-parser";
-import { FileList, RelatedArticleList, Grid, GridType, GridParallaxItem, FramedContent } from "@ndla/ui";
+import { FramedContent } from "@ndla/primitives";
+import { FileList, RelatedArticleList, Grid, GridType, GridParallaxItem } from "@ndla/ui";
 import { PluginType } from "./types";
 
 export const divPlugin: PluginType = (node, opts) => {

package/src/plugins/{dtPlugin.tsx → dlPlugin.tsx}

@@ -7,15 +7,15 @@
  */
 
 import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
-import { DefinitionTerm } from "@ndla/ui";
+import { DefinitionList } from "@ndla/primitives";
 import { PluginType } from "./types";
 
-export const dtPlugin: PluginType = (node, converterOpts, opts) => {
+export const dlPlugin: PluginType = (node, converterOpts, opts) => {
   const props = attributesToProps(node.attribs);
 
   return (
-    <DefinitionTerm {...props} lang={opts.articleLanguage}>
+    <DefinitionList {...props} lang={opts.articleLanguage}>
       {domToReact(node.children as DOMNode[], converterOpts)}
-    </DefinitionTerm>
+    </DefinitionList>
   );
 };

package/src/plugins/embed/conceptEmbedPlugin.tsx

@@ -14,5 +14,5 @@ import { PluginType } from "../types";
 export const conceptEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props["data-json"] as string) as ConceptMetaData;
-  return <ConceptEmbed embed={data} fullWidth lang={opts.articleLanguage} renderContext={opts.renderContext} />;
+  return <ConceptEmbed embed={data} lang={opts.articleLanguage} renderContext={opts.renderContext} />;
 };

package/src/plugins/embed/imageEmbedPlugin.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { attributesToProps, Element } from "html-react-parser";
+import { attributesToProps } from "html-react-parser";
 import { ImageMetaData } from "@ndla/types-embed";
 import { ImageEmbed } from "@ndla/ui";
 import { PluginType } from "../types";
@@ -14,11 +14,9 @@ import { PluginType } from "../types";
 export const imageEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props["data-json"] as string) as ImageMetaData;
-  const inGrid = (element.parentNode?.parentNode as Element)?.attribs?.["data-type"] === "grid";
 
   return (
     <ImageEmbed
-      inGrid={inGrid}
       embed={data}
       previewAlt={opts.previewAlt}
       lang={opts.articleLanguage}

package/src/plugins/index.ts

@@ -8,16 +8,18 @@
 
 import { anchorPlugin } from "./anchorPlugin";
 import { asidePlugin } from "./asidePlugin";
+import { blockquotePlugin } from "./blockquotePlugin";
 import { copyParagraphPlugin } from "./copyParagraphPlugin";
-import { ddPlugin } from "./ddPlugin";
+import { detailsPlugin } from "./detailsPlugin";
 import { divPlugin } from "./divPlugin";
-import { dtPlugin } from "./dtPlugin";
+import { dlPlugin } from "./dlPlugin";
 import { h3Plugin } from "./h3Plugin";
 import { mathPlugin } from "./mathPlugin";
 import { navPlugin } from "./navPlugin";
 import { anchorPlugin as oembedAnchorPlugin } from "./oembed/anchorPlugin";
 import { olPlugin } from "./olPlugin";
 import { paragraphPlugin } from "./paragraphPlugin";
+import { summaryPlugin } from "./summaryPlugin";
 import { tablePlugin } from "./tablePlugin";
 import { PluginType } from "./types";
 import { ulPlugin } from "./ulPlugin";
@@ -32,10 +34,12 @@ export const basePlugins: Record<string, PluginType> = {
   table: tablePlugin,
   aside: asidePlugin,
   ul: ulPlugin,
-  dd: ddPlugin,
-  dt: dtPlugin,
   nav: navPlugin,
   a: anchorPlugin,
+  summary: summaryPlugin,
+  details: detailsPlugin,
+  dl: dlPlugin,
+  blockquote: blockquotePlugin,
 };
 
 export const oembedPlugins: Record<string, PluginType> = {

package/src/plugins/{ddPlugin.tsx → summaryPlugin.tsx}

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * Copyright (c) 2024-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,15 +7,13 @@
  */
 
 import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
-import { DefinitionDescription } from "@ndla/ui";
+import { ExpandableBoxSummary } from "@ndla/primitives";
 import { PluginType } from "./types";
 
-export const ddPlugin: PluginType = (node, converterOpts, opts) => {
+export const summaryPlugin: PluginType = (node, converterOpts) => {
   const props = attributesToProps(node.attribs);
 
   return (
-    <DefinitionDescription {...props} lang={opts.articleLanguage}>
-      {domToReact(node.children as DOMNode[], converterOpts)}
-    </DefinitionDescription>
+    <ExpandableBoxSummary {...props}>{domToReact(node.children as DOMNode[], converterOpts)}</ExpandableBoxSummary>
   );
 };

package/src/plugins/tablePlugin.tsx

@@ -7,7 +7,7 @@
  */
 
 import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
-import { Table } from "@ndla/ui";
+import { Table } from "@ndla/primitives";
 import { PluginType } from "./types";
 export const tablePlugin: PluginType = (node, converterOpts, opts) => {
   const props = attributesToProps(node.attribs);