fix: supports the openform HTML with nl-design-system

Author: AliKdhim87

.changeset/small-seals-type.md

@@ -0,0 +1,5 @@
+---
+"@frameless/pdc-frontend": patch
+---
+
+Render de Open Formulieren HTML met NL Design System CSS componenten.

apps/pdc-frontend/package.json

@@ -54,23 +54,22 @@
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.1.0",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "15.0.7",
+    "@types/jest": "29.5.12",
     "@types/lodash.mergewith": "4.6.9",
     "@utrecht/focus-ring-css": "1.1.0",
     "@utrecht/form-label-css": "1.1.0",
-    "@utrecht/table-css": "1.4.0",
     "@utrecht/spotlight-section-css": "1.6.0",
     "@utrecht/multiline-data-css": "1.1.0",
     "@utrecht/textbox-css": "1.2.0",
-    "eslint-config-next": "13.2.4",
     "eslint": "8.35.0",
-    "sass": "1.63.6",
-    "wait-on": "7.2.0",
+    "eslint-config-next": "13.2.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "@testing-library/react": "15.0.7",
-    "@testing-library/jest-dom": "6.4.5",
+    "sass": "1.63.6",
     "ts-node": "10.9.2",
-    "@types/jest": "29.5.12"
+    "wait-on": "7.2.0"
   },
   "repository": {
     "type": "git+ssh",

apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss

@@ -1,7 +1,6 @@
 @import "~@utrecht/multiline-data-css/src/mixin";
 @import "~@utrecht/form-label-css/src/mixin";
 @import "~@utrecht/textbox-css/src/mixin";
-@import "~@utrecht/table-css/src/html/mixin";
 @import "~@utrecht/spotlight-section-css/src/mixin";
 
 :root {
@@ -69,10 +68,6 @@
   flex: 1 1;
 }
 
-.openforms-body .openforms-body--wysiwyg {
-  @include utrecht-html-table;
-}
-
 .openforms-formio-content {
   &--info {
     --of-formio-content-info-border-inline-start-style: none;

apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.tsx

@@ -1,7 +1,9 @@
 import React, { type ReactNode, useId } from 'react';
 import { OpenFormsScript } from './OpenFormsScript';
 import '@open-formulieren/sdk/styles.css';
+import '@utrecht/component-library-css/dist/html.css';
 import './OpenFormsEmbed.scss';
+import { RichText } from '../index';
 
 export type OpenFormsEmbedProps = {
   nonce: string;
@@ -17,12 +19,14 @@ export const OpenFormsEmbed = ({ nonce, basePath, slug, apiUrl, sdkUrl, cssUrl,
   const id = useId();
 
   return (
-    <>
-      <div id={id} data-base-url={apiUrl} data-form-id={slug} data-base-path={basePath}>
-        {fallback}
-      </div>
-      <link rel="stylesheet" nonce={nonce} href={cssUrl} />
-      <OpenFormsScript targetId={id} nonce={nonce} src={sdkUrl} />
-    </>
+    <div className="utrecht-html">
+      <RichText>
+        <div id={id} data-base-url={apiUrl} data-form-id={slug} data-base-path={basePath}>
+          {fallback}
+        </div>
+        <link rel="stylesheet" nonce={nonce} href={cssUrl} />
+        <OpenFormsScript targetId={id} nonce={nonce} src={sdkUrl} />
+      </RichText>
+    </div>
   );
 };

yarn.lock

@@ -8345,11 +8345,6 @@
   resolved "https://registry.yarnpkg.com/@utrecht/spotlight-section-css/-/spotlight-section-css-1.6.0.tgz#4966e3e6eba2eda10d2dd357bc12f65455de221e"
   integrity sha512-dUKcskHCIbzbJKjsd591ogKqfbQeoDVgOnNUZcT80hz3Fdj+84/axQF4ZccuxyhJ7oRNdJlr2wnx9BzvkQCfJg==
 
-"@utrecht/table-css@1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@utrecht/table-css/-/table-css-1.4.0.tgz#fc675468cd887f301af895f72f26cc4d69fd857d"
-  integrity sha512-D2JvmGY9uf2/N/wiq4XbX5/9Gz5iTIsjiJF4huFmP+XRB7zzSwPTWgC/AdQWtIUiYlWQMFvvB6bOMtCIUq9eKA==
-
 "@utrecht/textbox-css@1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@utrecht/textbox-css/-/textbox-css-1.2.0.tgz#41be4783d178ab227b9bd188253407a688e69226"