Merge pull request #55 from open-formulieren/feature/4546-soft-requir…

…ed-validation

Soft required validation

src/formio/components/file.ts

@@ -79,7 +79,7 @@ export interface FileUploadConfiguration {
 export interface BaseFileComponentSchema
   extends Omit<StrictComponentSchema<FileUploadData[]>, UnusedFileProperties | 'errors'>,
     DisplayConfig,
-    Omit<OFExtensions<TranslatableKeys>, 'registration'>,
+    Omit<OFExtensions<TranslatableKeys, {softRequired?: boolean}>, 'registration'>,
     HasValidation<Validator> {
   validate?: OFValidateOptions<Validator>;
   type: 'file';

src/formio/components/index.ts

@@ -30,3 +30,4 @@ export * from './password';
 export * from './content';
 export * from './columns';
 export * from './fieldset';
+export * from './softRequiredErrors';

src/formio/components/softRequiredErrors.ts

@@ -0,0 +1,45 @@
+import {LayoutComponentSchema, OFExtensions} from '..';
+
+type TranslatableKeys = 'html';
+
+/**
+ * The softRequiredErrors component schema. It's a variation on the WYSIWYG content
+ * component.
+ *
+ * Any validation errors related to soft-required fields (the fields are required but
+ * don't block progressing in the form and are therefore mostly informational/warnings)
+ * are displayed here. The form designer can control the body text, and the SDK will
+ * then interpolate the actual field labels that violate the requirement(s). If there
+ * are no errors, the component is not to be displayed.
+ *
+ * @group Form.io components
+ * @category Concrete types
+ */
+export interface SoftRequiredErrorsComponentSchema
+  extends Omit<
+      LayoutComponentSchema<never>,
+      | 'conditional'
+      | 'tooltip'
+      | 'multiple'
+      | 'defaultValue'
+      | 'clearOnHide'
+      | 'validate'
+      | 'errors'
+      | 'description'
+      | 'hidden'
+      | 'hideLabel'
+      | 'disabled'
+      | 'widget'
+      | 'validateOn'
+      | 'placeholder'
+    >,
+    Omit<OFExtensions<TranslatableKeys>, 'registration' | 'isSensitiveData'> {
+  id: string;
+  key: string;
+  type: 'softRequiredErrors';
+  /**
+   * Even though the label is present, it is typically not displayed anywhere.
+   */
+  html: string;
+  label?: string;
+}

src/formio/index.ts

@@ -26,6 +26,7 @@ import {
   SelectComponentSchema,
   SelectboxesComponentSchema,
   SignatureComponentSchema,
+  SoftRequiredErrorsComponentSchema,
   TextFieldComponentSchema,
   TextareaComponentSchema,
   TimeComponentSchema,
@@ -85,6 +86,7 @@ export type AnyComponentSchema =
   | ContentComponentSchema
   | ColumnsComponentSchema
   | FieldsetComponentSchema
+  | SoftRequiredErrorsComponentSchema
   // deprecated
   | PostcodeComponentSchema
   | PasswordComponentSchema

test-d/formio/components/file.test-d.ts

@@ -215,8 +215,9 @@ expectAssignable<FileComponentSchema>({
     docVertrouwelijkheidaanduiding: 'openbaar',
     titel: '',
   },
-  // translations tab in builder form
+  // (mostly) translations tab in builder form
   openForms: {
+    softRequired: true,
     translations: {
       nl: {
         label: 'Bestand toevoegen',

test-d/formio/components/softRequiredErrors.test-d.ts

@@ -0,0 +1,28 @@
+import {expectAssignable} from 'tsd';
+
+import {SoftRequiredErrorsComponentSchema} from '../../../lib';
+
+// Minimal schema
+expectAssignable<SoftRequiredErrorsComponentSchema>({
+  type: 'softRequiredErrors',
+  id: 'iitral8',
+  key: 'someKey',
+  label: 'Ignored',
+  html: '<div>Will need to be properly {{ field_errors }} structured.</div>',
+});
+
+// With translations
+expectAssignable<SoftRequiredErrorsComponentSchema>({
+  type: 'softRequiredErrors',
+  id: 'iitral8',
+  key: 'someKey',
+  label: 'Ignored',
+  html: '<div>Will need to be properly {{ field_errors }} structured.</div>',
+  openForms: {
+    translations: {
+      nl: {
+        html: '<div>NL translation</div>',
+      },
+    },
+  },
+});