@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/field/__snapshots__/field.test.js.snap

@@ -0,0 +1,1526 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Field Component Field Component - empty title with textfield renders 0 title(s) 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control"
+        name="testname"
+        type="text"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component Field Component - hidden title with hidden input renders 0 title(s) 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--hidden ct-field--vertical    "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+                              
+
+  
+      <input
+        class="ct-input ct-theme-light  ct-field__control"
+        name="testname"
+        type="hidden"
+      />
+      
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component Field Component - hidden title with textfield renders 0 title(s) 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control"
+        name="testname"
+        type="text"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component Field Component - invisible title with textfield renders 1 title(s) 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    "
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title ct-visually-hidden"
+    >
+      Test Title
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control"
+        name="testname"
+        type="text"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component Field Component - visible title with hidden input renders 0 title(s) 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--hidden ct-field--vertical    "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+                              
+
+  
+      <input
+        class="ct-input ct-theme-light  ct-field__control"
+        name="testname"
+        type="hidden"
+      />
+      
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component Field Component - visible title with textfield renders 1 title(s) 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    "
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+    >
+      Test Title
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control"
+        name="testname"
+        type="text"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component default input 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--email ct-field--vertical    custom-modifier"
+    data-test="true"
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      for="testid"
+    >
+      Test Title
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+                              
+
+  
+      <input
+        class="ct-input ct-theme-light  ct-field__control"
+        id="testid"
+        name="testname"
+        type="email"
+        value="testvalue"
+      />
+      
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component default values 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--hidden ct-field--vertical    "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+                              
+
+  
+      <input
+        class="ct-input ct-theme-light  ct-field__control"
+        name="test"
+        type="hidden"
+      />
+      
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component field messages custom message renders correctly when message object is passed 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control"
+        name="testname"
+        type="text"
+      />
+      
+
+      
+      
+                      
+                
+                          
+        
+
+
+      <div
+        class="ct-field-message ct-theme-light ct-field-message--information ct-field__message"
+        data-test="true"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-regular ct-field-message__icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16V12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11ZM12.38 7.08C12.1365 6.97998 11.8635 6.97998 11.62 7.08C11.4973 7.12759 11.3851 7.19896 11.29 7.29C11.2017 7.3872 11.1306 7.49882 11.08 7.62C11.024 7.73868 10.9966 7.86882 11 8C10.9992 8.13161 11.0245 8.26207 11.0742 8.38391C11.124 8.50574 11.1973 8.61656 11.29 8.71C11.3872 8.79833 11.4988 8.86936 11.62 8.92C11.7715 8.98224 11.936 9.00632 12.099 8.99011C12.2619 8.97391 12.4184 8.91792 12.5547 8.82707C12.691 8.73622 12.8029 8.61328 12.8805 8.46907C12.9582 8.32486 12.9992 8.16378 13 8C12.9963 7.73523 12.8927 7.48163 12.71 7.29C12.6149 7.19896 12.5028 7.12759 12.38 7.08ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z"
+          />
+          
+
+        </svg>
+        
+    Custom error message
+      </div>
+                
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component field messages default message renders when field is invalid without message object and no field title 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical   ct-field--invalid "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        aria-invalid="true"
+        class="ct-textfield ct-theme-light ct-textfield--is-invalid ct-field__control"
+        name="testname"
+        type="text"
+      />
+      
+
+      
+      
+                      
+                                  
+        
+        
+
+
+      <div
+        class="ct-field-message ct-theme-light ct-field-message--error ct-field__message"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-regular ct-field-message__icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M15.7098 8.28996C15.6169 8.19623 15.5063 8.12183 15.3844 8.07107C15.2626 8.0203 15.1318 7.99416 14.9998 7.99416C14.8678 7.99416 14.7371 8.0203 14.6153 8.07107C14.4934 8.12183 14.3828 8.19623 14.2898 8.28996L11.9998 10.59L9.70984 8.28996C9.52153 8.10165 9.26614 7.99587 8.99984 7.99587C8.73353 7.99587 8.47814 8.10165 8.28983 8.28996C8.10153 8.47826 7.99574 8.73366 7.99574 8.99996C7.99574 9.26626 8.10153 9.52165 8.28983 9.70996L10.5898 12L8.28983 14.29C8.19611 14.3829 8.12171 14.4935 8.07094 14.6154C8.02017 14.7372 7.99404 14.8679 7.99404 15C7.99404 15.132 8.02017 15.2627 8.07094 15.3845C8.12171 15.5064 8.19611 15.617 8.28983 15.71C8.3828 15.8037 8.4934 15.8781 8.61526 15.9288C8.73712 15.9796 8.86782 16.0058 8.99984 16.0058C9.13185 16.0058 9.26255 15.9796 9.38441 15.9288C9.50627 15.8781 9.61687 15.8037 9.70984 15.71L11.9998 13.41L14.2898 15.71C14.3828 15.8037 14.4934 15.8781 14.6153 15.9288C14.7371 15.9796 14.8678 16.0058 14.9998 16.0058C15.1318 16.0058 15.2626 15.9796 15.3844 15.9288C15.5063 15.8781 15.6169 15.8037 15.7098 15.71C15.8036 15.617 15.878 15.5064 15.9287 15.3845C15.9795 15.2627 16.0056 15.132 16.0056 15C16.0056 14.8679 15.9795 14.7372 15.9287 14.6154C15.878 14.4935 15.8036 14.3829 15.7098 14.29L13.4098 12L15.7098 9.70996C15.8036 9.61699 15.878 9.50639 15.9287 9.38453C15.9795 9.26267 16.0056 9.13197 16.0056 8.99996C16.0056 8.86795 15.9795 8.73724 15.9287 8.61538C15.878 8.49352 15.8036 8.38292 15.7098 8.28996ZM19.0698 4.92996C18.1474 3.97486 17.0439 3.21303 15.8239 2.68894C14.6038 2.16485 13.2916 1.88899 11.9638 1.87745C10.6361 1.86591 9.31926 2.11893 8.09029 2.62174C6.86133 3.12455 5.74481 3.86708 4.80589 4.80601C3.86696 5.74493 3.12443 6.86145 2.62162 8.09042C2.11881 9.31938 1.86579 10.6362 1.87733 11.964C1.88887 13.2918 2.16473 14.604 2.68882 15.824C3.21291 17.044 3.97473 18.1475 4.92984 19.07C5.8523 20.0251 6.95575 20.7869 8.17579 21.311C9.39583 21.8351 10.708 22.1109 12.0358 22.1225C13.3636 22.134 14.6804 21.881 15.9094 21.3782C17.1383 20.8754 18.2549 20.1328 19.1938 19.1939C20.1327 18.255 20.8752 17.1385 21.3781 15.9095C21.8809 14.6805 22.1339 13.3637 22.1223 12.0359C22.1108 10.7082 21.8349 9.39595 21.3109 8.17591C20.7868 6.95587 20.0249 5.85243 19.0698 4.92996ZM17.6598 17.66C16.3519 18.9694 14.6304 19.7848 12.7886 19.9673C10.9469 20.1497 9.09884 19.688 7.55936 18.6607C6.01987 17.6334 4.88419 16.1042 4.34581 14.3334C3.80742 12.5627 3.89964 10.6601 4.60675 8.94974C5.31386 7.23938 6.59211 5.82711 8.22373 4.95352C9.85534 4.07993 11.7394 3.79909 13.5548 4.15883C15.3703 4.51857 17.0049 5.49665 18.1801 6.92642C19.3553 8.35619 19.9984 10.1492 19.9998 12C20.0034 13.0512 19.7984 14.0928 19.3968 15.0643C18.9951 16.0359 18.4047 16.9181 17.6598 17.66Z"
+          />
+          
+
+        </svg>
+        
+    Field has an error
+      </div>
+                
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component field messages default message renders when message object has no content and title is present 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical   ct-field--invalid "
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+    >
+      Test input
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        aria-invalid="true"
+        class="ct-textfield ct-theme-light ct-textfield--is-invalid ct-field__control"
+        name="testname"
+        type="text"
+      />
+      
+
+      
+      
+                                        
+                                  
+        
+        
+
+
+      <div
+        class="ct-field-message ct-theme-light ct-field-message--error ct-field__message"
+        data-test="true"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-regular ct-field-message__icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M15.7098 8.28996C15.6169 8.19623 15.5063 8.12183 15.3844 8.07107C15.2626 8.0203 15.1318 7.99416 14.9998 7.99416C14.8678 7.99416 14.7371 8.0203 14.6153 8.07107C14.4934 8.12183 14.3828 8.19623 14.2898 8.28996L11.9998 10.59L9.70984 8.28996C9.52153 8.10165 9.26614 7.99587 8.99984 7.99587C8.73353 7.99587 8.47814 8.10165 8.28983 8.28996C8.10153 8.47826 7.99574 8.73366 7.99574 8.99996C7.99574 9.26626 8.10153 9.52165 8.28983 9.70996L10.5898 12L8.28983 14.29C8.19611 14.3829 8.12171 14.4935 8.07094 14.6154C8.02017 14.7372 7.99404 14.8679 7.99404 15C7.99404 15.132 8.02017 15.2627 8.07094 15.3845C8.12171 15.5064 8.19611 15.617 8.28983 15.71C8.3828 15.8037 8.4934 15.8781 8.61526 15.9288C8.73712 15.9796 8.86782 16.0058 8.99984 16.0058C9.13185 16.0058 9.26255 15.9796 9.38441 15.9288C9.50627 15.8781 9.61687 15.8037 9.70984 15.71L11.9998 13.41L14.2898 15.71C14.3828 15.8037 14.4934 15.8781 14.6153 15.9288C14.7371 15.9796 14.8678 16.0058 14.9998 16.0058C15.1318 16.0058 15.2626 15.9796 15.3844 15.9288C15.5063 15.8781 15.6169 15.8037 15.7098 15.71C15.8036 15.617 15.878 15.5064 15.9287 15.3845C15.9795 15.2627 16.0056 15.132 16.0056 15C16.0056 14.8679 15.9795 14.7372 15.9287 14.6154C15.878 14.4935 15.8036 14.3829 15.7098 14.29L13.4098 12L15.7098 9.70996C15.8036 9.61699 15.878 9.50639 15.9287 9.38453C15.9795 9.26267 16.0056 9.13197 16.0056 8.99996C16.0056 8.86795 15.9795 8.73724 15.9287 8.61538C15.878 8.49352 15.8036 8.38292 15.7098 8.28996ZM19.0698 4.92996C18.1474 3.97486 17.0439 3.21303 15.8239 2.68894C14.6038 2.16485 13.2916 1.88899 11.9638 1.87745C10.6361 1.86591 9.31926 2.11893 8.09029 2.62174C6.86133 3.12455 5.74481 3.86708 4.80589 4.80601C3.86696 5.74493 3.12443 6.86145 2.62162 8.09042C2.11881 9.31938 1.86579 10.6362 1.87733 11.964C1.88887 13.2918 2.16473 14.604 2.68882 15.824C3.21291 17.044 3.97473 18.1475 4.92984 19.07C5.8523 20.0251 6.95575 20.7869 8.17579 21.311C9.39583 21.8351 10.708 22.1109 12.0358 22.1225C13.3636 22.134 14.6804 21.881 15.9094 21.3782C17.1383 20.8754 18.2549 20.1328 19.1938 19.1939C20.1327 18.255 20.8752 17.1385 21.3781 15.9095C21.8809 14.6805 22.1339 13.3637 22.1223 12.0359C22.1108 10.7082 21.8349 9.39595 21.3109 8.17591C20.7868 6.95587 20.0249 5.85243 19.0698 4.92996ZM17.6598 17.66C16.3519 18.9694 14.6304 19.7848 12.7886 19.9673C10.9469 20.1497 9.09884 19.688 7.55936 18.6607C6.01987 17.6334 4.88419 16.1042 4.34581 14.3334C3.80742 12.5627 3.89964 10.6601 4.60675 8.94974C5.31386 7.23938 6.59211 5.82711 8.22373 4.95352C9.85534 4.07993 11.7394 3.79909 13.5548 4.15883C15.3703 4.51857 17.0049 5.49665 18.1801 6.92642C19.3553 8.35619 19.9984 10.1492 19.9998 12C20.0034 13.0512 19.7984 14.0928 19.3968 15.0643C18.9951 16.0359 18.4047 16.9181 17.6598 17.66Z"
+          />
+          
+
+        </svg>
+        
+    Field 
+        <em>
+          Test input
+        </em>
+         has an error
+      </div>
+                
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component multiple control as array propagation - checkbox 1`] = `
+<div>
+  
+
+
+
+    
+    
+    
+        
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--checkbox ct-field--vertical    "
+  >
+    
+    
+    
+    <fieldset
+      class="ct-field__wrapper"
+    >
+      
+              
+
+
+      <legend
+        class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      >
+        Test Title
+      </legend>
+                  
+      
+      
+                                                                                
+
+  
+      <ul
+        class="ct-item-list ct-item-list--vertical ct-item-list--regular  "
+      >
+        
+                  
+        <li
+          class="ct-item-list__item"
+        >
+                                    
+
+  
+          <input
+            class="ct-checkbox ct-theme-light  ct-field__control custom-modifier"
+            data-test="true"
+            id="testid"
+            name="testname"
+            type="checkbox"
+            value="testvalue"
+          />
+          
+      
+
+
+          <label
+            class="ct-label ct-theme-light ct-label--small  ct-checkbox__label"
+            for="testid"
+          >
+            Test Title
+          </label>
+                                  
+        </li>
+        
+                        
+        <li
+          class="ct-item-list__item"
+        >
+                                    
+
+  
+          <input
+            checked=""
+            class="ct-checkbox ct-theme-light  ct-field__control custom-modifier2"
+            data-test="false"
+            id="testid2"
+            name="testname"
+            type="checkbox"
+            value="testvalue2"
+          />
+          
+      
+
+
+          <label
+            class="ct-label ct-theme-light ct-label--small  ct-checkbox__label"
+            for="testid2"
+          >
+            Test Title
+          </label>
+                                  
+        </li>
+        
+            
+      </ul>
+      
+
+      
+      
+          
+    </fieldset>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component multiple control as array propagation - textfield 1`] = `
+<div>
+  
+
+
+
+    
+    
+    
+        
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    "
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      for="testid"
+    >
+      Test Title
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control custom-modifier"
+        data-test="true"
+        id="testid"
+        name="testname"
+        type="text"
+        value="testvalue"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component multiple control as array propagation with mixed levels - checkbox 1`] = `
+<div>
+  
+
+
+
+    
+    
+    
+        
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--checkbox ct-field--vertical    custom-modifier-parent"
+    data-test-parent="true"
+  >
+    
+    
+    
+    <fieldset
+      class="ct-field__wrapper"
+    >
+      
+              
+
+
+      <legend
+        class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      >
+        Test Title
+      </legend>
+                  
+      
+      
+                                                                                
+
+  
+      <ul
+        class="ct-item-list ct-item-list--vertical ct-item-list--regular  "
+      >
+        
+                  
+        <li
+          class="ct-item-list__item"
+        >
+                                    
+
+  
+          <input
+            class="ct-checkbox ct-theme-light  ct-field__control custom-modifier-nested1"
+            data-test-nested1="true"
+            id="testid1"
+            name="testname"
+            type="checkbox"
+            value="testvalue"
+          />
+          
+      
+
+
+          <label
+            class="ct-label ct-theme-light ct-label--small  ct-checkbox__label"
+            for="testid1"
+          >
+            Checkbox 1
+          </label>
+                                  
+        </li>
+        
+                        
+        <li
+          class="ct-item-list__item"
+        >
+                                    
+
+  
+          <input
+            class="ct-checkbox ct-theme-light  ct-field__control"
+            id="testid2"
+            name="testname"
+            type="checkbox"
+            value="testvalue2"
+          />
+          
+      
+
+
+          <label
+            class="ct-label ct-theme-light ct-label--small  ct-checkbox__label"
+            for="testid2"
+          >
+            Checkbox 2
+          </label>
+                                  
+        </li>
+        
+            
+      </ul>
+      
+
+      
+      
+          
+    </fieldset>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component nothing is rendered if name is not provided 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+    
+</div>
+`;
+
+exports[`Field Component radio 1`] = `
+<div>
+  
+
+
+
+    
+    
+    
+        
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--radio ct-field--vertical    "
+  >
+    
+    
+    
+    <fieldset
+      class="ct-field__wrapper"
+    >
+      
+              
+
+
+      <legend
+        class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      >
+        Test Title
+      </legend>
+                  
+      
+      
+                                                                                
+
+  
+      <ul
+        class="ct-item-list ct-item-list--vertical ct-item-list--regular  "
+      >
+        
+                  
+        <li
+          class="ct-item-list__item"
+        >
+                                    
+
+  
+          <input
+            class="ct-radio ct-theme-light  ct-field__control custom-modifier"
+            data-test="true"
+            id="testid"
+            name="testname"
+            type="radio"
+            value="testvalue"
+          />
+          
+      
+
+
+          <label
+            class="ct-label ct-theme-light ct-label--small  ct-radio__label"
+            for="testid"
+          >
+            Test Title
+          </label>
+                                  
+        </li>
+        
+                        
+        <li
+          class="ct-item-list__item"
+        >
+                                    
+
+  
+          <input
+            checked=""
+            class="ct-radio ct-theme-light  ct-field__control custom-modifier2"
+            data-test="false"
+            id="testid2"
+            name="testname"
+            type="radio"
+            value="testvalue2"
+          />
+          
+      
+
+
+          <label
+            class="ct-label ct-theme-light ct-label--small  ct-radio__label"
+            for="testid2"
+          >
+            Test Title
+          </label>
+                                  
+        </li>
+        
+            
+      </ul>
+      
+
+      
+      
+          
+    </fieldset>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component required, disabled, and description 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical ct-field--required ct-field--disabled  "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+                            
+                
+        
+
+
+      <div
+        class="ct-field-description ct-theme-light ct-field-description--regular ct-field__description"
+      >
+        This is a description
+      </div>
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control"
+        disabled=""
+        name="testname"
+        required=""
+        type="text"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component select 1`] = `
+<div>
+  
+
+
+
+  
+          
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--select ct-field--vertical    custom-modifier"
+    data-test="true"
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      for="testid"
+    >
+      Test Title
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <select
+        class="ct-select ct-theme-light  ct-field__control"
+        id="testid"
+        name="testname"
+      >
+        
+                          
+      </select>
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component single control as array propagation 1`] = `
+<div>
+  
+
+
+
+    
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    "
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      for="testid"
+    >
+      Test Title
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control custom-modifier"
+        data-test="true"
+        id="testid"
+        name="testname"
+        type="text"
+        value="testvalue"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component single control as object propagation 1`] = `
+<div>
+  
+
+
+
+    
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    "
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      for="testid"
+    >
+      Test Title
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control custom-modifier"
+        data-test="true"
+        id="testid"
+        name="testname"
+        type="text"
+        value="testvalue"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component textarea with all attributes 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textarea ct-field--vertical ct-field--required  ct-field--invalid custom-modifier"
+    data-test="true"
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular ct-label--required ct-field__title"
+      for="testid"
+    >
+      Test Title 
+      <span
+        class="ct-label__required"
+      >
+        (required)
+      </span>
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <textarea
+        aria-invalid="true"
+        class="ct-textarea ct-theme-light ct-textarea--is-invalid ct-field__control"
+        id="testid"
+        name="testname"
+        required=""
+      >
+        testvalue
+      </textarea>
+      
+
+      
+      
+                                        
+                                  
+        
+        
+
+
+      <div
+        class="ct-field-message ct-theme-light ct-field-message--error ct-field__message"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-regular ct-field-message__icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M15.7098 8.28996C15.6169 8.19623 15.5063 8.12183 15.3844 8.07107C15.2626 8.0203 15.1318 7.99416 14.9998 7.99416C14.8678 7.99416 14.7371 8.0203 14.6153 8.07107C14.4934 8.12183 14.3828 8.19623 14.2898 8.28996L11.9998 10.59L9.70984 8.28996C9.52153 8.10165 9.26614 7.99587 8.99984 7.99587C8.73353 7.99587 8.47814 8.10165 8.28983 8.28996C8.10153 8.47826 7.99574 8.73366 7.99574 8.99996C7.99574 9.26626 8.10153 9.52165 8.28983 9.70996L10.5898 12L8.28983 14.29C8.19611 14.3829 8.12171 14.4935 8.07094 14.6154C8.02017 14.7372 7.99404 14.8679 7.99404 15C7.99404 15.132 8.02017 15.2627 8.07094 15.3845C8.12171 15.5064 8.19611 15.617 8.28983 15.71C8.3828 15.8037 8.4934 15.8781 8.61526 15.9288C8.73712 15.9796 8.86782 16.0058 8.99984 16.0058C9.13185 16.0058 9.26255 15.9796 9.38441 15.9288C9.50627 15.8781 9.61687 15.8037 9.70984 15.71L11.9998 13.41L14.2898 15.71C14.3828 15.8037 14.4934 15.8781 14.6153 15.9288C14.7371 15.9796 14.8678 16.0058 14.9998 16.0058C15.1318 16.0058 15.2626 15.9796 15.3844 15.9288C15.5063 15.8781 15.6169 15.8037 15.7098 15.71C15.8036 15.617 15.878 15.5064 15.9287 15.3845C15.9795 15.2627 16.0056 15.132 16.0056 15C16.0056 14.8679 15.9795 14.7372 15.9287 14.6154C15.878 14.4935 15.8036 14.3829 15.7098 14.29L13.4098 12L15.7098 9.70996C15.8036 9.61699 15.878 9.50639 15.9287 9.38453C15.9795 9.26267 16.0056 9.13197 16.0056 8.99996C16.0056 8.86795 15.9795 8.73724 15.9287 8.61538C15.878 8.49352 15.8036 8.38292 15.7098 8.28996ZM19.0698 4.92996C18.1474 3.97486 17.0439 3.21303 15.8239 2.68894C14.6038 2.16485 13.2916 1.88899 11.9638 1.87745C10.6361 1.86591 9.31926 2.11893 8.09029 2.62174C6.86133 3.12455 5.74481 3.86708 4.80589 4.80601C3.86696 5.74493 3.12443 6.86145 2.62162 8.09042C2.11881 9.31938 1.86579 10.6362 1.87733 11.964C1.88887 13.2918 2.16473 14.604 2.68882 15.824C3.21291 17.044 3.97473 18.1475 4.92984 19.07C5.8523 20.0251 6.95575 20.7869 8.17579 21.311C9.39583 21.8351 10.708 22.1109 12.0358 22.1225C13.3636 22.134 14.6804 21.881 15.9094 21.3782C17.1383 20.8754 18.2549 20.1328 19.1938 19.1939C20.1327 18.255 20.8752 17.1385 21.3781 15.9095C21.8809 14.6805 22.1339 13.3637 22.1223 12.0359C22.1108 10.7082 21.8349 9.39595 21.3109 8.17591C20.7868 6.95587 20.0249 5.85243 19.0698 4.92996ZM17.6598 17.66C16.3519 18.9694 14.6304 19.7848 12.7886 19.9673C10.9469 20.1497 9.09884 19.688 7.55936 18.6607C6.01987 17.6334 4.88419 16.1042 4.34581 14.3334C3.80742 12.5627 3.89964 10.6601 4.60675 8.94974C5.31386 7.23938 6.59211 5.82711 8.22373 4.95352C9.85534 4.07993 11.7394 3.79909 13.5548 4.15883C15.3703 4.51857 17.0049 5.49665 18.1801 6.92642C19.3553 8.35619 19.9984 10.1492 19.9998 12C20.0034 13.0512 19.7984 14.0928 19.3968 15.0643C18.9951 16.0359 18.4047 16.9181 17.6598 17.66Z"
+          />
+          
+
+        </svg>
+        
+    Field 
+        <em>
+          Test Title
+        </em>
+         has an error
+      </div>
+                
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component textfield 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--textfield ct-field--vertical    custom-modifier"
+    data-test="true"
+  >
+    
+          
+
+
+    <label
+      class="ct-label ct-theme-light ct-label--regular  ct-field__title"
+      for="testid"
+    >
+      Test Title
+    </label>
+        
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        class="ct-textfield ct-theme-light  ct-field__control"
+        id="testid"
+        name="testname"
+        type="text"
+        value="testvalue"
+      />
+      
+
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component theme, orientation, and invalid state 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-dark ct-field--textfield ct-field--horizontal   ct-field--invalid "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+              
+
+  
+      <input
+        aria-invalid="true"
+        class="ct-textfield ct-theme-dark ct-textfield--is-invalid ct-field__control"
+        name="testname"
+        type="text"
+      />
+      
+
+      
+      
+                      
+                                  
+        
+        
+
+
+      <div
+        class="ct-field-message ct-theme-dark ct-field-message--error ct-field__message"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-regular ct-field-message__icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M15.7098 8.28996C15.6169 8.19623 15.5063 8.12183 15.3844 8.07107C15.2626 8.0203 15.1318 7.99416 14.9998 7.99416C14.8678 7.99416 14.7371 8.0203 14.6153 8.07107C14.4934 8.12183 14.3828 8.19623 14.2898 8.28996L11.9998 10.59L9.70984 8.28996C9.52153 8.10165 9.26614 7.99587 8.99984 7.99587C8.73353 7.99587 8.47814 8.10165 8.28983 8.28996C8.10153 8.47826 7.99574 8.73366 7.99574 8.99996C7.99574 9.26626 8.10153 9.52165 8.28983 9.70996L10.5898 12L8.28983 14.29C8.19611 14.3829 8.12171 14.4935 8.07094 14.6154C8.02017 14.7372 7.99404 14.8679 7.99404 15C7.99404 15.132 8.02017 15.2627 8.07094 15.3845C8.12171 15.5064 8.19611 15.617 8.28983 15.71C8.3828 15.8037 8.4934 15.8781 8.61526 15.9288C8.73712 15.9796 8.86782 16.0058 8.99984 16.0058C9.13185 16.0058 9.26255 15.9796 9.38441 15.9288C9.50627 15.8781 9.61687 15.8037 9.70984 15.71L11.9998 13.41L14.2898 15.71C14.3828 15.8037 14.4934 15.8781 14.6153 15.9288C14.7371 15.9796 14.8678 16.0058 14.9998 16.0058C15.1318 16.0058 15.2626 15.9796 15.3844 15.9288C15.5063 15.8781 15.6169 15.8037 15.7098 15.71C15.8036 15.617 15.878 15.5064 15.9287 15.3845C15.9795 15.2627 16.0056 15.132 16.0056 15C16.0056 14.8679 15.9795 14.7372 15.9287 14.6154C15.878 14.4935 15.8036 14.3829 15.7098 14.29L13.4098 12L15.7098 9.70996C15.8036 9.61699 15.878 9.50639 15.9287 9.38453C15.9795 9.26267 16.0056 9.13197 16.0056 8.99996C16.0056 8.86795 15.9795 8.73724 15.9287 8.61538C15.878 8.49352 15.8036 8.38292 15.7098 8.28996ZM19.0698 4.92996C18.1474 3.97486 17.0439 3.21303 15.8239 2.68894C14.6038 2.16485 13.2916 1.88899 11.9638 1.87745C10.6361 1.86591 9.31926 2.11893 8.09029 2.62174C6.86133 3.12455 5.74481 3.86708 4.80589 4.80601C3.86696 5.74493 3.12443 6.86145 2.62162 8.09042C2.11881 9.31938 1.86579 10.6362 1.87733 11.964C1.88887 13.2918 2.16473 14.604 2.68882 15.824C3.21291 17.044 3.97473 18.1475 4.92984 19.07C5.8523 20.0251 6.95575 20.7869 8.17579 21.311C9.39583 21.8351 10.708 22.1109 12.0358 22.1225C13.3636 22.134 14.6804 21.881 15.9094 21.3782C17.1383 20.8754 18.2549 20.1328 19.1938 19.1939C20.1327 18.255 20.8752 17.1385 21.3781 15.9095C21.8809 14.6805 22.1339 13.3637 22.1223 12.0359C22.1108 10.7082 21.8349 9.39595 21.3109 8.17591C20.7868 6.95587 20.0249 5.85243 19.0698 4.92996ZM17.6598 17.66C16.3519 18.9694 14.6304 19.7848 12.7886 19.9673C10.9469 20.1497 9.09884 19.688 7.55936 18.6607C6.01987 17.6334 4.88419 16.1042 4.34581 14.3334C3.80742 12.5627 3.89964 10.6601 4.60675 8.94974C5.31386 7.23938 6.59211 5.82711 8.22373 4.95352C9.85534 4.07993 11.7394 3.79909 13.5548 4.15883C15.3703 4.51857 17.0049 5.49665 18.1801 6.92642C19.3553 8.35619 19.9984 10.1492 19.9998 12C20.0034 13.0512 19.7984 14.0928 19.3968 15.0643C18.9951 16.0359 18.4047 16.9181 17.6598 17.66Z"
+          />
+          
+
+        </svg>
+        
+    Field has an error
+      </div>
+                
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Field Component values 1`] = `
+<div>
+  
+
+
+
+  
+    
+    
+      
+  <div
+    class="ct-field ct-theme-light ct-field--hidden ct-field--vertical    "
+  >
+    
+    
+    
+    <div
+      class="ct-field__wrapper"
+    >
+      
+            
+      
+                              
+
+  
+      <input
+        class="ct-input ct-theme-light  ct-field__control"
+        name="testname"
+        type="hidden"
+        value="testvalue"
+      />
+      
+      
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;