From 753bcbe8e33f5ceb872edb7844b4749b7dce36f0 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Thu, 9 Nov 2023 11:29:52 +0100
Subject: [PATCH] :sparkles: [#469] Use data-list component from Utrecht

---
 src/formio/templates/editGridRow.ejs     | 13 ++++++++++---
 src/scss/nl-design-system-community.scss |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs
index 93160988b..486f0d001 100644
--- a/src/formio/templates/editGridRow.ejs
+++ b/src/formio/templates/editGridRow.ejs
@@ -1,8 +1,15 @@
+<dl class="utrecht-data-list utrecht-data-list--html-dl utrecht-data-list--rows">
   {% for (const key in ctx.flattenedComponents) { %}
-      {% if (ctx.isVisibleInRow(ctx.flattenedComponents[key]) && ctx.flattenedComponents[key].label) { %}
-          <div>{{ctx.flattenedComponents[key].label}}: {{ ctx.getView(ctx.flattenedComponents[key], ctx.row[key]) }}</div>
-      {% } %}
+    {% if (ctx.isVisibleInRow(ctx.flattenedComponents[key]) && ctx.flattenedComponents[key].label) { %}
+      <div class="utrecht-data-list__item">
+        <dt class="utrecht-data-list__item-key">{{ctx.flattenedComponents[key].label}}</dt>
+        <dd class="utrecht-data-list__item-value utrecht-data-list__item-value--html-dd">
+          {{ ctx.getView(ctx.flattenedComponents[key], ctx.row[key]) }}
+        </dd>
+      </div>
+    {% } %}
   {% } %}
+</dl>
 
 {% if (!ctx.self.options.readOnly) { %}
   <p class="utrecht-button-group utrecht-button-group--openforms-editgrid" role="group">
diff --git a/src/scss/nl-design-system-community.scss b/src/scss/nl-design-system-community.scss
index a1d36e943..9b0ecf7d9 100644
--- a/src/scss/nl-design-system-community.scss
+++ b/src/scss/nl-design-system-community.scss
@@ -5,3 +5,4 @@
 @import '@utrecht/components/dist/form-fieldset/css/index.css';
 @import '@utrecht/components/dist/radio-button/css/index.css';
 @import '@utrecht/components/dist/alert/css/index.css';
+@import '@utrecht/components/dist/data-list/css/index.css';