feat: update flo legal decision tree client to 1.17.0

Author: AliKdhim87

.changeset/tall-queens-beg.md

@@ -0,0 +1,6 @@
+---
+"@utrecht/flo-legal-decision-tree-client": patch
+"@utrecht/flolegal-decision-tree-css": patch
+---
+
+Update de Flo Legal Decision Tree client en CSS naar versie 1.17.0 om bugfixes en verbeteringen door te voeren.

.eslintignore

@@ -24,3 +24,4 @@ packages/web-component-library-vue/src/vue-component-lib/
 
 packages/flolegal-decision-tree-client/assets/flo-client-styles.css
 packages/flolegal-decision-tree-client/assets/flo-client-plugin.js
+packages/flolegal-decision-tree-client/assets/flo-client-plugin-polyfills.js

.prettierignore

@@ -34,3 +34,4 @@ packages/astro/.astro
 
 packages/flolegal-decision-tree-client/assets/flo-client-styles.css
 packages/flolegal-decision-tree-client/assets/flo-client-plugin.js
+packages/flolegal-decision-tree-client/assets/flo-client-plugin-polyfills.js

components/flo-legal-decision-tree/src/index.scss

@@ -13,7 +13,7 @@
 
 /**
  * The nesting is intended to make the CSS specificity higher than the CSS in
- * /packages/flolegal-decision-tree-client/assets/flo-client-styles.1.13.2.css
+ * /packages/flolegal-decision-tree-client/assets/flo-client-styles.1.17.0.css
  * This allows Utrecht Design System styles to override the default Flo client styles.
  */
 .utrecht-flolegal-decision-tree-container {
@@ -60,6 +60,19 @@
     }
   }
 
+  .flo-nav .flo-form-button.flo-form-button-restart {
+    @include utrecht-button;
+    @include utrecht-button-appearance-properties("utrecht-button", "primary-action");
+
+    &:hover {
+      @include utrecht-button--hover;
+    }
+
+    &:disabled:hover {
+      @include utrecht-button--disabled;
+    }
+  }
+
   .flo-nav .flo-form-button:disabled {
     @include utrecht-button--disabled;
     @include utrecht-flo-decision-form-button;

packages/flolegal-decision-tree-client/README.md

@@ -1,7 +1,7 @@
 # @utrecht/flolegal-decision-tree-client
 
 Flo client assets and utilities for the Utrecht Design System.
-**Compatible with Flo Client Plugin v1.13.2**
+**Compatible with Flo Client Plugin v1.17.0**
 
 ## Installation
 
@@ -15,7 +15,7 @@ npm install @utrecht/flolegal-decision-tree-client
 
 ```tsx
 import { loadFloClientScript } from "@utrecht/flolegal-decision-tree-client";
-import "@utrecht/flolegal-decision-tree-client/dist/assets/flo-client-styles.1.13.2.css";
+import "@utrecht/flo-legal-decision-tree-client/dist/assets/flo-client-styles.css";
 
 // Load the script
 await loadFloClientScript("./");
@@ -79,7 +79,7 @@ For Next.js applications, copy the script to your public directory and use the `
 ```json
 {
   "scripts": {
-    "copy:flo-plugin": "cp node_modules/@utrecht/flolegal-decision-tree-client/assets/flo-client-plugin.1.13.2.js ./public",
+    "copy-flo-legal-decision-tree-client-script": "cp ../../node_modules/@utrecht/flo-legal-decision-tree-client/dist/assets/flo-client-plugin.js ../../node_modules/@utrecht/flo-legal-decision-tree-client/dist/assets/flo-client-plugin-polyfills.js ./public",
     "postinstall": "yarn copy:flo-plugin"
   }
 }
@@ -101,7 +101,8 @@ import Script from "next/script";
 export default function MyPage() {
   return (
     <>
-      <Script src="/flo-client-plugin.1.23.2.js" nonce={nonce} />
+      <Script src="/flo-client-plugin-polyfills.js" type="module" nonce={nonce} />
+      <Script src="/flo-client-plugin.js" type="module" nonce={nonce} />
       {/* Your component content */}
     </>
   );

packages/flolegal-decision-tree-client/assets/flo-client-plugin-polyfills.js

@@ -3,7 +3,7 @@
   "version": "1.0.2",
   "license": "EUPL-1.2",
   "author": "Community for NL Design System",
-  "description": "Flo legal Decision Tree client assets for Utrecht Design System (compatible with flo-client-plugin v1.13.2)",
+  "description": "Flo legal Decision Tree client assets for Utrecht Design System (compatible with flo-client-plugin v1.17.0)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "keywords": [

packages/flolegal-decision-tree-client/assets/flo-client-plugin.js

@@ -1,8 +1,9 @@
 /**
  * Flo Client Plugin Version
- * This package is compatible with flo-client-plugin version 1.13.2
+ * This package is compatible with flo-client-plugin version 1.17.0
  */
 const FLO_CLIENT_SCRIPT = `flo-client-plugin.js`;
+const FLO_CLIENT_POLYFILLS_SCRIPT = `flo-client-plugin-polyfills.js`;
 
 export interface LoadScriptOptions {
   nonce?: string;
@@ -17,19 +18,32 @@ export const loadFloClientScript = (basePath?: string, options: LoadScriptOption
     }
 
     const base = basePath ? new URL(basePath, window.location.origin).href : window.location.origin;
-    const src = new URL(FLO_CLIENT_SCRIPT, base).href;
-    if (document.querySelector(`script[src="${src}"]`)) {
+    const polyfillsSrc = new URL(FLO_CLIENT_POLYFILLS_SCRIPT, base).href;
+    const mainSrc = new URL(FLO_CLIENT_SCRIPT, base).href;
+
+    if (document.querySelector(`script[src="${mainSrc}"]`)) {
       resolve();
       return;
     }
 
-    const script = document.createElement('script');
-    script.src = src;
-    if (options.nonce) script.nonce = options.nonce;
-    if (options.integrity) script.integrity = options.integrity;
-    script.onload = () => resolve();
-    script.onerror = () =>
-      reject(new Error(`Failed to load ${src}. Make sure the file is available in your static assets.`));
-    document.head.appendChild(script);
+    const polyfillsScript = document.createElement('script');
+    polyfillsScript.src = polyfillsSrc;
+    polyfillsScript.type = 'module';
+    if (options.nonce) polyfillsScript.nonce = options.nonce;
+    if (options.integrity) polyfillsScript.integrity = options.integrity;
+    polyfillsScript.onerror = () =>
+      reject(new Error(`Failed to load ${polyfillsSrc}. Make sure the file is available in your static assets.`));
+
+    const mainScript = document.createElement('script');
+    mainScript.src = mainSrc;
+    mainScript.type = 'module';
+    if (options.nonce) mainScript.nonce = options.nonce;
+    if (options.integrity) mainScript.integrity = options.integrity;
+    mainScript.onload = () => resolve();
+    mainScript.onerror = () =>
+      reject(new Error(`Failed to load ${mainSrc}. Make sure the file is available in your static assets.`));
+
+    document.head.appendChild(polyfillsScript);
+    document.head.appendChild(mainScript);
   });
 };