From f3a80307809f4e003f51b822aacf798b0646d8c6 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 28 Oct 2024 17:38:17 +0100
Subject: [PATCH] :lipstick: [open-formulieren/open-forms#4546] Add alert
 styling to the soft required errors component

This enables it to be customized via NL DS design tokens, and provides
some escape hatches to make it different from the standard warning
alert appearance.
---
 src/formio/components/SoftRequiredErrors.js    | 11 ++++++++++-
 src/formio/templates/missingFields.ejs         |  2 +-
 src/scss/components/_soft-required-errors.scss | 17 +++++++++++++++++
 src/styles.scss                                |  1 +
 4 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/scss/components/_soft-required-errors.scss

diff --git a/src/formio/components/SoftRequiredErrors.js b/src/formio/components/SoftRequiredErrors.js
index cff14099f..bbf37a36d 100644
--- a/src/formio/components/SoftRequiredErrors.js
+++ b/src/formio/components/SoftRequiredErrors.js
@@ -43,7 +43,16 @@ class SoftRequiredErrors extends FormioContentField {
       missingFields: missingFieldsMarkup,
     });
 
-    return `<div id="${this.id}-content">${content}</div>`;
+    return `
+      <div id="${this.id}-content" class="utrecht-alert utrecht-alert--warning openforms-soft-required-errors">
+        <div class="utrecht-alert__icon">
+          <i class="fa fas fa-exclamation-triangle"></i>
+        </div>
+        <div class="utrecht-alert__message">
+          ${content}
+        </div>
+      </div>
+    `;
   }
 }
 
diff --git a/src/formio/templates/missingFields.ejs b/src/formio/templates/missingFields.ejs
index 2f85f9dc0..7790e35b1 100644
--- a/src/formio/templates/missingFields.ejs
+++ b/src/formio/templates/missingFields.ejs
@@ -1,7 +1,7 @@
 <span class="sr-only" id="{{ctx.id}}-missing-fields-header">
   {{ ctx.t('Empty fields') }}
 </span>
-<ul class="utrecht-unordered-list" aria-labelledby="{{ctx.id}}-missing-fields-header">
+<ul class="utrecht-unordered-list openforms-soft-required-errors__missing-fields" aria-labelledby="{{ctx.id}}-missing-fields-header">
 {% for (const label of ctx.labels) { %}
   <li class="utrecht-unordered-list__item">{{ label }}</li>
 {% } %}
diff --git a/src/scss/components/_soft-required-errors.scss b/src/scss/components/_soft-required-errors.scss
new file mode 100644
index 000000000..11638615e
--- /dev/null
+++ b/src/scss/components/_soft-required-errors.scss
@@ -0,0 +1,17 @@
+@use 'microscope-sass/lib/bem';
+
+@import '~microscope-sass/lib/typography';
+
+.openforms-soft-required-errors {
+  // apply all wysiwyg styling
+  // TODO: parametrize this with design tokens -> check with NL DS how to approach this
+  @include wysiwyg;
+
+  // unset, takes the utrecht-alert--warning by default, but can be overridden if desired
+  color: var(--of-soft-required-errors-color);
+  background-color: var(--of-soft-required-errors-background-color);
+
+  @include bem.element('missing-fields') {
+    font-weight: var(--of-soft-required-errors-missing-fields-font-weight, 600);
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index c81f4777e..798b623ac 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -72,3 +72,4 @@
 @import './scss/components/input-container';
 @import './scss/components/authentication-errors';
 @import './scss/components/govmetric_snippet';
+@import './scss/components/soft-required-errors';