bug fixes in review component

Author: Ravisanker E

blocks/form/components/review/review.css

@@ -1,2 +1,27 @@
-/* Review component styles */
-  /* Add your custom styles here */
+:root {
+  --color-action-border-primary-disabled: #a3baf9;
+}
+
+main .form form .review-container {
+  display: block;
+}
+
+main .form .review-container label {
+  margin:0;
+  position: relative;
+}
+
+main .form .review-container .field-wrapper:not(.panel-wrapper, .plain-text-wrapper, .file-wrapper) {
+  border-left: 3px solid var(--color-action-border-primary-disabled);
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+}
+
+main .form .review-panel-wrapper {
+  display: grid;
+}
+
+main .form .review-panel-wrapper .checkbox-wrapper {
+  margin: 5px;
+}

blocks/form/components/review/review.js

@@ -25,14 +25,15 @@ function replaceInputs(element, model) {
       item.items?.forEach(processItem);
       return;
     }
+    const { fieldType, id } = item;
 
-    if (!item.value || !item.id) return;
-
-    // Remove empty fields
-    element.querySelector(`[data-id="${item.id}"]`)?.remove();
+    if (fieldType === 'button') {
+      element.querySelector(`[data-id="${id}"]`)?.remove();
+      return;
+    }
 
+    if (!item.value || !item.id) return;
     const divElement = createReviewFieldElement(item);
-    const { fieldType, id } = item;
 
     if (fieldType === 'radio-group' || fieldType === 'checkbox-group') {
       const group = element.querySelector(`fieldset[data-id="${id}"]`);
@@ -58,12 +59,13 @@ function replaceInputs(element, model) {
 }
 
 function render(element, fd, model) {
-  if (element.hasAttribute('data-rendered')) return;
+  element.innerHTML = ''; 
+  if (!model) return;
 
   const { form } = model;
   const { properties } = fd;
 
-  if (!properties?.panelNames || !form) return;
+  if (!properties?.panelNames) return;
 
   const panelModels = [];
   form.visit((field) => {
@@ -73,7 +75,7 @@ function render(element, fd, model) {
   });
 
   panelModels.forEach(async (field) => {
-    if (!field.isContainer && !field.value) return;
+    if (!field.isContainer) return;
 
     const panelWrapper = document.createElement('div');
     panelWrapper.className = `review-panel-wrapper ${field.name}`;
@@ -83,7 +85,7 @@ function render(element, fd, model) {
 
     if (!decoratedPanel) return;
 
-    element.setAttribute('data-rendered', 'true');
+    element.appendChild(panelWrapper);
   });
 }