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

open-formulieren · Nov 9, 2023 · 0d3f1b3 · 0d3f1b3
1 parent 07101f4
commit 0d3f1b3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 13 deletions.
diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs
@@ -1,10 +1,15 @@
-<div class="openforms-editgrid__summary">
+<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])) { %}
-      <p>{{ctx.flattenedComponents[key].label}}: {{ ctx.getView(ctx.flattenedComponents[key], ctx.row[key]) }}</p>
+      <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>
     {% } %}
   {% } %}
-</div>
+</dl>
 
 {% if (!ctx.self.options.readOnly) { %}
   <p class="utrecht-button-group utrecht-button-group--openforms-editgrid" role="group">

diff --git a/src/scss/components/_editgrid.scss b/src/scss/components/_editgrid.scss
@@ -32,16 +32,6 @@
     }
   }
 
-  @include bem.element('summary') {
-    display: flex;
-    flex-direction: column;
-    gap: var(--of-editgrid-summary-gap, var(--of-editgrid-item-gap));
-
-    p {
-      margin: 0;
-    }
-  }
-
   @include bem.element('item-heading') {
     font-family: var(
       --of-editgrid-item-heading-font-family,

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';