@ndla/article-converter 9.0.13-alpha.0 → 9.0.15-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/{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/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/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

@@ -7,17 +7,16 @@
  */
 
 import { attributesToProps, domToReact } from "html-react-parser";
-import { OrderedList } from "@ndla/ui";
+import { OrderedList } from "@ndla/primitives";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export const olPlugin = (node, converterOpts, opts) => {
   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-${num}` : false;
-  const classes = [node.attribs.class ?? false, letterClass, numClass].filter(c => !!c).join(" ");
+  const variantProp = node.attribs["data-type"] === "letters" ? {
+    variant: "letters"
+  } : {};
   return _jsx(OrderedList, {
     ...props,
-    className: classes.length ? classes : undefined,
+    ...variantProp,
     lang: opts.articleLanguage,
     children: domToReact(node.children, converterOpts)
   });

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/plugins/ulPlugin.js

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

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/{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/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/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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.olPlugin = 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,13 +17,12 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
 const olPlugin = (node, converterOpts, opts) => {
   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-${num}` : false;
-  const classes = [node.attribs.class ?? false, letterClass, numClass].filter(c => !!c).join(" ");
-  return (0, _jsxRuntime.jsx)(_ui.OrderedList, {
+  const variantProp = node.attribs["data-type"] === "letters" ? {
+    variant: "letters"
+  } : {};
+  return (0, _jsxRuntime.jsx)(_primitives.OrderedList, {
     ...props,
-    className: classes.length ? classes : undefined,
+    ...variantProp,
     lang: opts.articleLanguage,
     children: (0, _htmlReactParser.domToReact)(node.children, converterOpts)
   });

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/plugins/ulPlugin.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ulPlugin = 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 ulPlugin = (node, converterOpts, opts) => {
   const props = (0, _htmlReactParser.attributesToProps)(node.attribs);
-  return (0, _jsxRuntime.jsx)(_ui.UnOrderedList, {
+  return (0, _jsxRuntime.jsx)(_primitives.UnOrderedList, {
     ...props,
     className: node.attribs.class,
     lang: opts.articleLanguage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/article-converter",
-  "version": "9.0.13-alpha.0",
+  "version": "9.0.15-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.13-alpha.0",
+    "@ndla/primitives": "^0.0.19",
+    "@ndla/ui": "^55.0.15-alpha.0",
     "html-react-parser": "^5.1.8"
   },
   "peerDependencies": {
@@ -46,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "93dde6fe4aaca52642f8fa0a27f4acad359207cb"
+  "gitHead": "3675a902b9f44f5afb37c648038b8d90f1ccd7d0"
 }

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/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/olPlugin.tsx

@@ -7,17 +7,14 @@
  */
 
 import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
-import { OrderedList } from "@ndla/ui";
+import { OrderedList } from "@ndla/primitives";
 import { PluginType } from "./types";
 export const olPlugin: PluginType = (node, converterOpts, opts) => {
   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-${num}` : false;
-  const classes = [node.attribs.class ?? false, letterClass, numClass].filter((c): c is string => !!c).join(" ");
+  const variantProp = node.attribs["data-type"] === "letters" ? ({ variant: "letters" } as const) : {};
 
   return (
-    <OrderedList {...props} className={classes.length ? classes : undefined} lang={opts.articleLanguage}>
+    <OrderedList {...props} {...variantProp} lang={opts.articleLanguage}>
       {domToReact(node.children as DOMNode[], converterOpts)}
     </OrderedList>
   );

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);

package/src/plugins/ulPlugin.tsx

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