✨ [#469] Use data-list component from Utrecht

open-formulieren · Nov 10, 2023 · 753bcbe · 753bcbe
1 parent 23f1937
commit 753bcbe
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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';