Merge pull request #590 from open-formulieren/feature/469-refactor-ed…

…itgrid [#469] Add specific style for editgrid summary
open-formulieren · Nov 10, 2023 · 5d50035 · 5d50035
2 parents 23f1937 + 7b42cf9
commit 5d50035
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/design-tokens b/design-tokens
diff --git 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",

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';
+2 −2		package-lock.json
+1 −1		package.json
+23 −0		src/community/utrecht/data-list.tokens.json