💄 [open-formulieren/open-forms#4546] Add alert styling to the soft re…

…quired 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

@@ -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>
+    `;
   }
 }
 

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>
 {% } %}

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);
+  }
+}

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