From 0aab98ef7288b9b3a093195f3885f97726f160da Mon Sep 17 00:00:00 2001
From: Heleen <magned@gmail.com>
Date: Tue, 15 Aug 2023 12:37:15 +0200
Subject: [PATCH] Updated form base test

---
 .../components/form-base-test.html            | 205 ++++++++++--------
 1 file changed, 112 insertions(+), 93 deletions(-)

diff --git a/docs/documentation/components/form-base-test.html b/docs/documentation/components/form-base-test.html
index d6360dfc..8a9a96b8 100644
--- a/docs/documentation/components/form-base-test.html
+++ b/docs/documentation/components/form-base-test.html
@@ -2383,102 +2383,119 @@ <h3>Lorem ipsum dolor set amet</h3>
                 ipsum dolor set amet</p>
             </div>
 
-            <label for="help-simpel-voorbeeld-text-input-explanation-1">Voorbeeld invoerveld met
-              reguliere toelichting</label>
-            <div>
-              <p class="explanation" id="help-simpel-voorbeeld-text-input-explanation-1-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
-              <input id="help-simpel-voorbeeld-text-input-explanation-1" class="explanation"
-                name="help-simpel-voorbeeld-text-input-explanation-1" placeholder="Voorbeeld invoerveld toelichting"
-                type="text" aria-describedby="help-simpel-voorbeeld-text-input-explanation-1-message">
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-text-input-explanation-1">Voorbeeld invoerveld met
+                reguliere toelichting</label>
+              <div>
+                <p class="explanation" id="help-simpel-voorbeeld-text-input-explanation-1-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+                <input id="help-simpel-voorbeeld-text-input-explanation-1" class="explanation"
+                  name="help-simpel-voorbeeld-text-input-explanation-1" placeholder="Voorbeeld invoerveld toelichting"
+                  type="text" aria-describedby="help-simpel-voorbeeld-text-input-explanation-1-message">
+              </div>
             </div>
 
-            <label for="help-simpel-voorbeeld-text-input-warning-1">Voorbeeld invoerveld
-              waarschuwing</label>
-            <div>
-              <p class="warning" id="help-simpel-voorbeeld-text-input-warning-1-message">
-                <span>Waarschuwing:</span> Lorem ipsum dolor set amet
-              </p>
-              <input id="help-simpel-voorbeeld-text-input-warning-1" class="warning"
-                name="help-simpel-voorbeeld-text-input-warning-1" placeholder="Voorbeeld invoerveld waarschuwing"
-                type="text" aria-describedby="help-simpel-voorbeeld-text-input-warning-1-message">
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-text-input-warning-1">Voorbeeld invoerveld
+                waarschuwing</label>
+              <div>
+                <p class="warning" id="help-simpel-voorbeeld-text-input-warning-1-message">
+                  <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+                </p>
+                <input id="help-simpel-voorbeeld-text-input-warning-1" class="warning"
+                  name="help-simpel-voorbeeld-text-input-warning-1" placeholder="Voorbeeld invoerveld waarschuwing"
+                  type="text" aria-describedby="help-simpel-voorbeeld-text-input-warning-1-message">
+              </div>
             </div>
 
-            <label for="help-simpel-voorbeeld-tekstveld-2">Voorbeeld tekstveld met reguliere
-              toelichting</label>
-            <div>
-              <p class="explanation" id="help-simpel-voorbeeld-tekstveld-2-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
-              <textarea id="help-simpel-voorbeeld-tekstveld-2" name="help-simpel-voorbeeld-tekstveld-2"
-                placeholder="Jouw vraag of opmerking" rows="5"
-                aria-describedby="help-simpel-voorbeeld-tekstveld-2-message"></textarea>
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-tekstveld-2">Voorbeeld tekstveld met reguliere
+                toelichting</label>
+              <div>
+                <p class="explanation" id="help-simpel-voorbeeld-tekstveld-2-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+                <textarea id="help-simpel-voorbeeld-tekstveld-2" name="help-simpel-voorbeeld-tekstveld-2"
+                  placeholder="Jouw vraag of opmerking" rows="5"
+                  aria-describedby="help-simpel-voorbeeld-tekstveld-2-message"></textarea>
+              </div>
             </div>
 
-            <label for="help-simpel-voorbeeld-text-input-collapsed-explanation-1">Voorbeeld invoerveld
-              met ingeklapte toelichting</label>
-            <div>
-              <input id="help-simpel-voorbeeld-text-input-collapsed-explanation-1" class="explanation"
-                name="help-simpel-voorbeeld-text-input-collapsed-explanation-1"
-                placeholder="Voorbeeld invoerveld toelichting" type="text">
-              <p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
-                data-close-label="Sluit toelichting bij het veld: Voorbeeld text input">Lorem ipsum dolor set amet.</p>
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-text-input-collapsed-explanation-1">Voorbeeld invoerveld
+                met ingeklapte toelichting</label>
+              <div>
+                <input id="help-simpel-voorbeeld-text-input-collapsed-explanation-1" class="explanation"
+                  name="help-simpel-voorbeeld-text-input-collapsed-explanation-1"
+                  placeholder="Voorbeeld invoerveld toelichting" type="text">
+                <p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
+                  data-close-label="Sluit toelichting bij het veld: Voorbeeld text input">Lorem ipsum dolor set amet.</p>
+              </div>
             </div>
 
-            <label for="help-simpel-voorbeeld-tekstveld-3">Voorbeeld tekstveld met reguliere
-              toelichting</label>
-            <div>
-              <textarea id="help-simpel-voorbeeld-tekstveld-3" name="help-simpel-voorbeeld-tekstveld-3"
-                placeholder="Jouw vraag of opmerking" rows="5"
-                aria-describedby="help-simpel-voorbeeld-tekstveld-3-message"></textarea>
-              <p class="explanation" id="help-simpel-voorbeeld-tekstveld-3-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-tekstveld-3">Voorbeeld tekstveld met reguliere
+                toelichting</label>
+              <div>
+                <textarea id="help-simpel-voorbeeld-tekstveld-3" name="help-simpel-voorbeeld-tekstveld-3"
+                  placeholder="Jouw vraag of opmerking" rows="5"
+                  aria-describedby="help-simpel-voorbeeld-tekstveld-3-message"></textarea>
+                <p class="explanation" id="help-simpel-voorbeeld-tekstveld-3-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+              </div>
             </div>
 
-            <label for="select-with-explanation-3">Voorbeeld select met reguliere toelichting</label>
-            <div>
-              <p class="explanation" id="select-with-explanation-3-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
-              <select id="select-with-explanation-3" name="select-with-explanation-3"
-                aria-describedby="select-with-explanation-3-message">
-                <option value="1">Optie 1</option>
-                <option value="2">Optie 2</option>
-                <option value="3">Optie 3</option>
-              </select>
+            <div class="notification">
+              <label for="select-with-explanation-3">Voorbeeld select met reguliere toelichting</label>
+              <div>
+                <p class="explanation" id="select-with-explanation-3-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+                <select id="select-with-explanation-3" name="select-with-explanation-3"
+                  aria-describedby="select-with-explanation-3-message">
+                  <option value="1">Optie 1</option>
+                  <option value="2">Optie 2</option>
+                  <option value="3">Optie 3</option>
+                </select>
+              </div>
             </div>
 
-            <label for="select-with-collapsed-explanation-1">Voorbeeld select met ingeklapte
-              toelichting</label>
-            <div>
-              <select id="select-with-collapsed-explanation-1" name="select-with-collapsed-explanation-1"
-                aria-describedby="select-with-collapsed-explanation-1-message">
-                <option value="1">Optie 1</option>
-                <option value="2">Optie 2</option>
-                <option value="3">Optie 3</option>
-              </select>
-              <p class="explanation" id="select-with-collapsed-explanation-1-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
+            <div class="notification">
+              <label for="select-with-collapsed-explanation-1">Voorbeeld select met ingeklapte
+                toelichting</label>
+              <div>
+                <select id="select-with-collapsed-explanation-1" name="select-with-collapsed-explanation-1"
+                  aria-describedby="select-with-collapsed-explanation-1-message">
+                  <option value="1">Optie 1</option>
+                  <option value="2">Optie 2</option>
+                  <option value="3">Optie 3</option>
+                </select>
+                <p class="explanation" id="select-with-collapsed-explanation-1-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+              </div>
             </div>
 
+
             <fieldset class="grouped-choice-list">
               <legend>Radio-selectielijst met reguliere toelichting</legend>
-              <p class="explanation" id="help-radio-list-item-1-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
-              <div>
-                <div class="radio">
-                  <input type="radio" id="help-radio-list-item-1" name="radio-option-1" value="value 1"
-                    aria-describedby="help-radio-list-item-1-message">
-                  <label for="help-radio-list-item-1">Optie 1</label>
-                </div>
-                <div class="radio">
-                  <input type="radio" id="help-radio-list-item-2" name="radio-option-2" value="value 2"
-                    aria-describedby="help-radio-list-item-1-message">
-                  <label for="help-radio-list-item-2">Optie 2</label>
+              <div class="notification">
+                <p class="explanation" id="help-radio-list-item-1-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+                <div>
+                  <div class="radio">
+                    <input type="radio" id="help-radio-list-item-1" name="radio-option-1" value="value 1"
+                      aria-describedby="help-radio-list-item-1-message">
+                    <label for="help-radio-list-item-1">Optie 1</label>
+                  </div>
+                  <div class="radio">
+                    <input type="radio" id="help-radio-list-item-2" name="radio-option-2" value="value 2"
+                      aria-describedby="help-radio-list-item-1-message">
+                    <label for="help-radio-list-item-2">Optie 2</label>
+                  </div>
                 </div>
               </div>
             </fieldset>
@@ -2486,21 +2503,23 @@ <h3>Lorem ipsum dolor set amet</h3>
 
             <fieldset class="grouped-choice-list">
               <legend>Radio-selectielijst met ingeklapte toelichting</legend>
-              <div>
-                <div class="radio">
-                  <input type="radio" id="help-collapsed-radio-list-item-1" name="radio-option-1" value="value 1"
-                    aria-describedby="help-collapsed-radio-list-item-1-message">
-                  <label for="help-collapsed-radio-list-item-1">Optie 1</label>
-                </div>
-                <div class="radio">
-                  <input type="radio" id="help-collapsed-radio-list-item-2" name="radio-option-2" value="value 2"
-                    aria-describedby="help-collapsed-radio-list-item-1-message">
-                  <label for="help-collapsed-radio-list-item-2">Optie 2</label>
+              <div class="notification">
+                <div>
+                  <div class="radio">
+                    <input type="radio" id="help-collapsed-radio-list-item-1" name="radio-option-1" value="value 1"
+                      aria-describedby="help-collapsed-radio-list-item-1-message">
+                    <label for="help-collapsed-radio-list-item-1">Optie 1</label>
+                  </div>
+                  <div class="radio">
+                    <input type="radio" id="help-collapsed-radio-list-item-2" name="radio-option-2" value="value 2"
+                      aria-describedby="help-collapsed-radio-list-item-1-message">
+                    <label for="help-collapsed-radio-list-item-2">Optie 2</label>
+                  </div>
                 </div>
+                <p class="explanation" id="help-collapsed-radio-list-item-1-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
               </div>
-              <p class="explanation" id="help-collapsed-radio-list-item-1-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
             </fieldset>
 
             <fieldset>