@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/single-filter/__snapshots__/single-filter.test.js.snap

@@ -0,0 +1,694 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Single Filter Component does not render when items are empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Single Filter Component renders with multiple selection enabled 1`] = `
+<div>
+  
+
+  
+  
+  <div
+    class="ct-single-filter ct-theme-light "
+    data-component-name="ct-single-filter"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+
+                                
+                                                                                                                  
+            
+                          
+          <div
+            class="ct-single-filter__title"
+          >
+            Filter results by:
+          </div>
+          
+            
+            
+          <div
+            class="ct-single-filter__wrapper"
+          >
+            
+              
+            <div
+              class="ct-single-filter__items"
+            >
+              
+                
+
+  
+              <ul
+                class="ct-item-list ct-item-list--horizontal ct-item-list--small  ct-single-filter__list"
+              >
+                
+                  
+                <li
+                  class="ct-item-list__item"
+                >
+                                                                                                                                                                      
+
+    
+                  <label
+                    class="ct-chip ct-theme-light ct-chip--input ct-chip--small active ct-chip--multiple "
+                    data-chip-dismiss=""
+                    data-chip-group-parent=".ct-single-filter"
+                    data-component-name="chip"
+                  >
+                    
+      
+                    <input
+                      checked="checked"
+                      class="ct-chip__input"
+                      name="filter1"
+                      type="checkbox"
+                    />
+                    
+      
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Filter 
+                    </span>
+                    <span
+                      class="ct-text-icon__group"
+                    >
+                      <span
+                        class="ct-text-icon__text"
+                      >
+                        1
+                      </span>
+                       
+                      <svg
+                        aria-hidden="true"
+                        class="ct-icon ct-chip__dismiss"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        
+
+                        <path
+                          d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+                        />
+                        
+
+                      </svg>
+                      
+
+                    </span>
+                  </label>
+                  
+                                
+                </li>
+                
+                        
+                <li
+                  class="ct-item-list__item"
+                >
+                                                                                                                                                                      
+
+    
+                  <label
+                    class="ct-chip ct-theme-light ct-chip--input ct-chip--small  ct-chip--multiple "
+                    data-chip-dismiss=""
+                    data-chip-group-parent=".ct-single-filter"
+                    data-component-name="chip"
+                  >
+                    
+      
+                    <input
+                      class="ct-chip__input"
+                      name="filter2"
+                      type="checkbox"
+                    />
+                    
+      
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Filter 
+                    </span>
+                    <span
+                      class="ct-text-icon__group"
+                    >
+                      <span
+                        class="ct-text-icon__text"
+                      >
+                        2
+                      </span>
+                       
+                      <svg
+                        aria-hidden="true"
+                        class="ct-icon ct-chip__dismiss"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        
+
+                        <path
+                          d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+                        />
+                        
+
+                      </svg>
+                      
+
+                    </span>
+                  </label>
+                  
+                                
+                </li>
+                
+            
+              </ul>
+              
+              
+            </div>
+            
+              
+            <div
+              class="ct-single-filter__actions"
+            >
+              
+                
+
+  
+              <button
+                _keys="type"
+                class="ct-button ct-theme-light ct-button--primary ct-button--button ct-button--small   ct-single-filter__submit"
+                data-component-name="button"
+                type="submit"
+              >
+                
+      
+                <span
+                  class="ct-text-icon__text"
+                >
+                  Apply 
+                </span>
+                <span
+                  class="ct-text-icon__group"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    filter
+                  </span>
+                   
+                  <svg
+                    aria-hidden="true"
+                    class="ct-icon ct-button__icon"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    
+
+                    <path
+                      d="M14.72 8.79L10.43 13.09L8.78 11.44C8.69036 11.3353 8.58004 11.2503 8.45597 11.1903C8.33191 11.1303 8.19678 11.0965 8.05906 11.0912C7.92134 11.0859 7.78401 11.1091 7.65568 11.1594C7.52736 11.2096 7.41081 11.2859 7.31335 11.3833C7.2159 11.4808 7.13964 11.5974 7.08937 11.7257C7.03909 11.854 7.01589 11.9913 7.02121 12.1291C7.02653 12.2668 7.06026 12.4019 7.12028 12.526C7.1803 12.65 7.26532 12.7604 7.37 12.85L9.72 15.21C9.81344 15.3027 9.92426 15.376 10.0461 15.4258C10.1679 15.4755 10.2984 15.5008 10.43 15.5C10.6923 15.4989 10.9437 15.3947 11.13 15.21L16.13 10.21C16.2237 10.117 16.2981 10.0064 16.3489 9.88458C16.3997 9.76272 16.4258 9.63201 16.4258 9.5C16.4258 9.36799 16.3997 9.23728 16.3489 9.11542C16.2981 8.99356 16.2237 8.88296 16.13 8.79C15.9426 8.60375 15.6892 8.49921 15.425 8.49921C15.1608 8.49921 14.9074 8.60375 14.72 8.79ZM12 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>
+                  
+
+                </span>
+              </button>
+              
+
+                              
+            </div>
+            
+            
+          </div>
+          
+
+            
+                      
+                                        
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Single Filter Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  
+  <div
+    class="ct-single-filter ct-theme-dark custom-class"
+    data-component-name="ct-single-filter"
+    data-test="true"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+
+                                    
+          <div
+            class="ct-single-filter__content-top"
+          >
+            Top content
+          </div>
+          
+                      
+                                                                                                                  
+            
+                          
+          <div
+            class="ct-single-filter__title"
+          >
+            Filter results by:
+          </div>
+          
+            
+            
+          <div
+            class="ct-single-filter__wrapper"
+          >
+            
+              
+            <div
+              class="ct-single-filter__items"
+            >
+              
+                
+
+  
+              <ul
+                class="ct-item-list ct-item-list--horizontal ct-item-list--small  ct-single-filter__list"
+              >
+                
+                  
+                <li
+                  class="ct-item-list__item"
+                >
+                                                                                                                                                                      
+
+    
+                  <label
+                    class="ct-chip ct-theme-dark ct-chip--input ct-chip--small active  "
+                    data-chip-group-parent=".ct-single-filter"
+                    data-component-name="chip"
+                  >
+                    
+      
+                    <input
+                      checked="checked"
+                      class="ct-chip__input"
+                      data-test="true"
+                      name="single-filter"
+                      type="radio"
+                    />
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Filter 1
+                    </span>
+                  </label>
+                  
+                                
+                </li>
+                
+                        
+                <li
+                  class="ct-item-list__item"
+                >
+                                                                                                                                                                      
+
+    
+                  <label
+                    class="ct-chip ct-theme-dark ct-chip--input ct-chip--small   "
+                    data-chip-group-parent=".ct-single-filter"
+                    data-component-name="chip"
+                  >
+                    
+      
+                    <input
+                      class="ct-chip__input"
+                      name="single-filter"
+                      type="radio"
+                    />
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Filter 2
+                    </span>
+                  </label>
+                  
+                                
+                </li>
+                
+            
+              </ul>
+              
+              
+            </div>
+            
+              
+            <div
+              class="ct-single-filter__actions"
+            >
+              
+                
+
+  
+              <button
+                _keys="type"
+                class="ct-button ct-theme-dark ct-button--primary ct-button--button ct-button--small   ct-single-filter__submit"
+                data-component-name="button"
+                type="submit"
+              >
+                
+      
+                <span
+                  class="ct-text-icon__text"
+                >
+                  Apply 
+                </span>
+                <span
+                  class="ct-text-icon__group"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    filter
+                  </span>
+                   
+                  <svg
+                    aria-hidden="true"
+                    class="ct-icon ct-button__icon"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    
+
+                    <path
+                      d="M14.72 8.79L10.43 13.09L8.78 11.44C8.69036 11.3353 8.58004 11.2503 8.45597 11.1903C8.33191 11.1303 8.19678 11.0965 8.05906 11.0912C7.92134 11.0859 7.78401 11.1091 7.65568 11.1594C7.52736 11.2096 7.41081 11.2859 7.31335 11.3833C7.2159 11.4808 7.13964 11.5974 7.08937 11.7257C7.03909 11.854 7.01589 11.9913 7.02121 12.1291C7.02653 12.2668 7.06026 12.4019 7.12028 12.526C7.1803 12.65 7.26532 12.7604 7.37 12.85L9.72 15.21C9.81344 15.3027 9.92426 15.376 10.0461 15.4258C10.1679 15.4755 10.2984 15.5008 10.43 15.5C10.6923 15.4989 10.9437 15.3947 11.13 15.21L16.13 10.21C16.2237 10.117 16.2981 10.0064 16.3489 9.88458C16.3997 9.76272 16.4258 9.63201 16.4258 9.5C16.4258 9.36799 16.3997 9.23728 16.3489 9.11542C16.2981 8.99356 16.2237 8.88296 16.13 8.79C15.9426 8.60375 15.6892 8.49921 15.425 8.49921C15.1608 8.49921 14.9074 8.60375 14.72 8.79ZM12 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>
+                  
+
+                </span>
+              </button>
+              
+
+                                  
+
+  
+              <input
+                _keys="type"
+                class="ct-button ct-theme-dark ct-button--secondary ct-button--reset ct-button--small   ct-single-filter__submit"
+                data-component-name="button"
+                type="reset"
+                value="Clear all"
+              />
+              
+                              
+            </div>
+            
+            
+          </div>
+          
+
+            
+                      
+                                    
+          <div
+            class="ct-single-filter__content-bottom"
+          >
+            Bottom content
+          </div>
+          
+                              
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Single Filter Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  
+  <div
+    class="ct-single-filter ct-theme-light "
+    data-component-name="ct-single-filter"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+
+                                
+                                                                                                                  
+            
+                          
+          <div
+            class="ct-single-filter__title"
+          >
+            Filter results by:
+          </div>
+          
+            
+            
+          <div
+            class="ct-single-filter__wrapper"
+          >
+            
+              
+            <div
+              class="ct-single-filter__items"
+            >
+              
+                
+
+  
+              <ul
+                class="ct-item-list ct-item-list--horizontal ct-item-list--small  ct-single-filter__list"
+              >
+                
+                  
+                <li
+                  class="ct-item-list__item"
+                >
+                                                                                                                                                                      
+
+    
+                  <label
+                    class="ct-chip ct-theme-light ct-chip--input ct-chip--small active  "
+                    data-chip-group-parent=".ct-single-filter"
+                    data-component-name="chip"
+                  >
+                    
+      
+                    <input
+                      checked="checked"
+                      class="ct-chip__input"
+                      name="single-filter"
+                      type="radio"
+                    />
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Filter 1
+                    </span>
+                  </label>
+                  
+                                
+                </li>
+                
+                        
+                <li
+                  class="ct-item-list__item"
+                >
+                                                                                                                                                                      
+
+    
+                  <label
+                    class="ct-chip ct-theme-light ct-chip--input ct-chip--small   "
+                    data-chip-group-parent=".ct-single-filter"
+                    data-component-name="chip"
+                  >
+                    
+      
+                    <input
+                      class="ct-chip__input"
+                      name="single-filter"
+                      type="radio"
+                    />
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Filter 2
+                    </span>
+                  </label>
+                  
+                                
+                </li>
+                
+            
+              </ul>
+              
+              
+            </div>
+            
+              
+            <div
+              class="ct-single-filter__actions"
+            >
+              
+                
+
+  
+              <button
+                _keys="type"
+                class="ct-button ct-theme-light ct-button--primary ct-button--button ct-button--small   ct-single-filter__submit"
+                data-component-name="button"
+                type="submit"
+              >
+                
+      
+                <span
+                  class="ct-text-icon__text"
+                >
+                  Apply 
+                </span>
+                <span
+                  class="ct-text-icon__group"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    filter
+                  </span>
+                   
+                  <svg
+                    aria-hidden="true"
+                    class="ct-icon ct-button__icon"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    
+
+                    <path
+                      d="M14.72 8.79L10.43 13.09L8.78 11.44C8.69036 11.3353 8.58004 11.2503 8.45597 11.1903C8.33191 11.1303 8.19678 11.0965 8.05906 11.0912C7.92134 11.0859 7.78401 11.1091 7.65568 11.1594C7.52736 11.2096 7.41081 11.2859 7.31335 11.3833C7.2159 11.4808 7.13964 11.5974 7.08937 11.7257C7.03909 11.854 7.01589 11.9913 7.02121 12.1291C7.02653 12.2668 7.06026 12.4019 7.12028 12.526C7.1803 12.65 7.26532 12.7604 7.37 12.85L9.72 15.21C9.81344 15.3027 9.92426 15.376 10.0461 15.4258C10.1679 15.4755 10.2984 15.5008 10.43 15.5C10.6923 15.4989 10.9437 15.3947 11.13 15.21L16.13 10.21C16.2237 10.117 16.2981 10.0064 16.3489 9.88458C16.3997 9.76272 16.4258 9.63201 16.4258 9.5C16.4258 9.36799 16.3997 9.23728 16.3489 9.11542C16.2981 8.99356 16.2237 8.88296 16.13 8.79C15.9426 8.60375 15.6892 8.49921 15.425 8.49921C15.1608 8.49921 14.9074 8.60375 14.72 8.79ZM12 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>
+                  
+
+                </span>
+              </button>
+              
+
+                              
+            </div>
+            
+            
+          </div>
+          
+
+            
+                      
+                                        
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;