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 1/2] :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';

From 7b42cf9873f46628da9bfaa30d77569f20906366 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Thu, 9 Nov 2023 16:31:02 +0100
Subject: [PATCH 2/2] :arrow_up: [#469] Upgrade design tokens

---
 design-tokens | 2 +-
 package.json  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/design-tokens b/design-tokens
index 0485a4657..b8ce48528 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit 0485a4657b51d6e2ec50d19d7b1f2a690b432c08
+Subproject commit b8ce4852832064b1e0c8a9e5fb69d266d5df60c5
diff --git a/package.json b/package.json
index 8d395c3db..272e80ce7 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.46.0",
+    "@open-formulieren/design-tokens": "^0.47.0",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",