[#1817] Added generic classes and styles for non-field errors

maykinmedia · Nov 30, 2023 · f52e061 · f52e061
1 parent 087b753
commit f52e061
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 43 deletions.
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -6,7 +6,7 @@
     {% render_card direction="vertical" %}
         {% icon icon="upload" icon_position="before" outlined=True %}
         <input class="file-input__input" id="{{ field.auto_id }}" name="file" type="file"{% if field.field.required %} required{% endif %}{% if multiple %} multiple{% endif %} data-max-size="{{ openzaak_config.max_upload_size }}">
-        <label class="button button--primary file-input__empty" for="{{ field.auto_id }}">
+        <label class="button button--primary file-input__label-empty" for="{{ field.auto_id }}">
             {% if multiple %}{% trans 'Sleep of selecteer bestanden' %}{% else %}{% trans 'Sleep of selecteer bestand' %}{% endif %}
         </label>
         <div class="file-input__selected">
@@ -17,7 +17,7 @@
         </div>
     {% endrender_card %}
 
-    {% if field.help_text %}<p class="p p--small p--upload-info">{{ field.help_text }}</p>{% endif %}
+    {% if field.help_text %}<p class="p p--small p--centered">{{ field.help_text }}</p>{% endif %}
     {% if field.errors %}{% errors errors=field.errors %}{% endif %}
 
     <div class="file-list" aria-live="polite">

diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js
@@ -9,10 +9,10 @@ export class FileInput extends Component {
 
   /**
    * Get configured maximum filesize from 'data-max-size' and use in node.
-   * @returns {string} Maximum file size.
+   * @returns {number} Maximum file size.
    */
   getLimit() {
-    return this.getInput().dataset.maxSize
+    return parseInt(this.getInput().dataset.maxSize)
   }
 
   /**
@@ -33,15 +33,15 @@ export class FileInput extends Component {
 
   /**
    * Return the label when zero files are selected.
-   * @return {HTMLInputElement}
+   * @return HTMLInputElement
    */
   getLabelEmpty() {
-    return this.node.querySelector(`${FileInput.selector}__empty`)
+    return this.node.querySelector(`${FileInput.selector}__label-empty`)
   }
 
   /**
    * Return the label if more than 0 files are selected.
-   * @return {HTMLInputElement}
+   * @return HTMLInputElement
    */
   getLabelSelected() {
     return this.node.querySelector(`${FileInput.selector}__selected`)
@@ -64,11 +64,11 @@ export class FileInput extends Component {
   }
 
   /**
-   * Returns the element associated with the help section.
+   * Returns the element associated with the error section that informs to delete files that exceed the limit.
    * @return {HTMLDivElement}
    */
-  getUploadHelpElement() {
-    return document.querySelector('.p--upload-help')
+  getFormNonFieldError() {
+    return document.querySelector('.form__non-field-error')
   }
 
   /**
@@ -220,6 +220,7 @@ export class FileInput extends Component {
     const ext = name.split('.').pop().toUpperCase()
     const sizeMB = (size / (1024 * 1024)).toFixed(2)
     const labelDelete = this.getFilesList().dataset.labelDelete || 'Delete'
+    const getFormNonFieldError = this.getFormNonFieldError()
 
     // Only show errors notification if data-max-file-size is exceeded + add error class to file-list
     const maxMegabytes = this.getLimit()
@@ -250,18 +251,17 @@ export class FileInput extends Component {
       </li>`
 
     if (sizeMB > maxMegabytes) {
-      const uploadHelpElement = this.getUploadHelpElement()
-      if (uploadHelpElement) {
-        uploadHelpElement.classList.add('error')
-      }
+      getFormNonFieldError.removeAttribute('hidden')
 
       return (
         htmlStart +
-        `<p class="p p--upload-error error">
+        `<p class="p p--small p--centered error">
           <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
           Dit bestand is te groot
         </p>`
       )
+    } else {
+      getFormNonFieldError.setAttribute('hidden', 'hidden')
     }
 
     return htmlStart

diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/src/open_inwoner/scss/components/Cases/CaseDetail.scss
@@ -37,20 +37,6 @@
       margin: 0;
     }
 
-    .p--upload-info {
-      text-align: center;
-
-      &.p--upload-help {
-        display: none;
-
-        &.error {
-          color: var(--color-gray-dark);
-          display: block;
-          margin-top: var(--spacing-medium);
-        }
-      }
-    }
-
     /// Make required asterisk visible for this component
     .label__label--required {
       color: var(--color-red);

diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -64,19 +64,6 @@
     text-align: center;
   }
 
-  .p--upload-error {
-    color: var(--color-red-notification);
-    display: flex;
-    align-items: normal;
-    gap: var(--spacing-small);
-    justify-content: flex-start;
-
-    [class*='icon'] {
-      color: var(--color-red-notification);
-      font-size: var(--font-size-body-large);
-    }
-  }
-
   .h4 {
     margin-top: var(--spacing-large);
     margin-bottom: calc(0.5 * var(--spacing-large));
@@ -101,5 +88,18 @@
         color: var(--color-red-notification);
       }
     }
+
+    .p--centered.error {
+      color: var(--color-red-notification);
+      display: flex;
+      align-items: normal;
+      gap: var(--spacing-small);
+      justify-content: flex-start;
+
+      [class*='icon'] {
+        color: var(--color-red-notification);
+        font-size: var(--font-size-body-large);
+      }
+    }
   }
 }
diff --git a/src/open_inwoner/scss/components/Form/NonFieldError.scss b/src/open_inwoner/scss/components/Form/NonFieldError.scss
@@ -0,0 +1,6 @@
+.form {
+  &__non-field-error {
+    color: var(--color-gray-dark);
+    margin-top: var(--spacing-medium);
+  }
+}
diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss
@@ -20,6 +20,10 @@
     color: var(--color-mute);
   }
 
+  &--centered {
+    text-align: center;
+  }
+
   &:empty {
     margin: 0 !important;
   }

diff --git a/src/open_inwoner/scss/components/_index.scss b/src/open_inwoner/scss/components/_index.scss
@@ -37,6 +37,7 @@
 @import './Form/Input.scss';
 @import './Form/Label.scss';
 @import './Form/MultiCheckbox.scss';
+@import './Form/NonFieldError.scss';
 @import './Form/Radio.scss';
 @import './Form/Search.scss';
 @import './Form/Select.scss';

diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html
@@ -6,5 +6,5 @@
     {% input form.type no_label=True no_help=True class="label input" id="id_type" extra_classes="file-type__select" %}
     {% file_input form.files %}
     {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" %}
-    <p class="p--upload-error p--small p--upload-info p--upload-help">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
+    <p class="form__non-field-error p--small p--centered" hidden>{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
 {% endrender_form %}