@dta-au/civictheme-twig 1.13.1

package/components/00-base/grid/__snapshots__/grid.test.js.snap

@@ -0,0 +1,2113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid Attributes and Modifier Class renders {
+  attributes: [DrupalAttribute [Map]],
+  modifier_class: 'custom-modifier',
+  use_container: false
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+              
+      
+  <div
+    class="row  custom-modifier"
+    data-test="true"
+  >
+    
+                        
+    <div
+      class="col"
+    >
+      
+            1
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Attributes and Modifier Class renders {
+  attributes: [DrupalAttribute [Map]],
+  modifier_class: 'custom-modifier',
+  use_container: true
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container custom-modifier"
+    data-test="true"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Container renders { use_container: false, is_fluid: false } 1`] = `
+<div>
+  
+
+
+    
+
+  
+        
+      
+  <div
+    class="row"
+  >
+    
+                        
+    <div
+      class="col"
+    >
+      
+            1
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Container renders { use_container: false, is_fluid: true } 1`] = `
+<div>
+  
+
+
+    
+
+  
+        
+      
+  <div
+    class="row"
+  >
+    
+                        
+    <div
+      class="col"
+    >
+      
+            1
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Container renders { use_container: true, is_fluid: false } 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Container renders { use_container: true, is_fluid: true } 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container-fluid"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 0,
+  row_class: 'custom-row',
+  column_class: 'custom-col',
+  fill_width: false,
+  expectedRowClass: 'row custom-row',
+  expectedColumnClass: 'col custom-col'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row custom-row"
+    >
+      
+                        
+      <div
+        class="col custom-col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 0,
+  row_class: 'custom-row',
+  column_class: 'custom-col',
+  fill_width: true,
+  expectedRowClass: 'row row--fill-width custom-row',
+  expectedColumnClass: 'col custom-col'
+} 1`] = `
+<div>
+  
+
+
+    
+  
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row row--fill-width custom-row"
+    >
+      
+                        
+      <div
+        class="col custom-col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 0,
+  row_class: null,
+  column_class: null,
+  fill_width: false,
+  expectedRowClass: 'row',
+  expectedColumnClass: 'col'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 0,
+  row_class: null,
+  column_class: null,
+  fill_width: true,
+  expectedRowClass: 'row row--fill-width',
+  expectedColumnClass: 'col'
+} 1`] = `
+<div>
+  
+
+
+    
+  
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row row--fill-width"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 12,
+  row_class: 'custom-row',
+  column_class: 'custom-col',
+  fill_width: false,
+  expectedRowClass: 'row custom-row',
+  expectedColumnClass: 'col-xxs-12 col-m-1 custom-col'
+} 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row custom-row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-1 custom-col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 12,
+  row_class: 'custom-row',
+  column_class: 'custom-col',
+  fill_width: true,
+  expectedRowClass: 'row row--fill-width custom-row',
+  expectedColumnClass: 'col-xxs-12 col-m-1 custom-col'
+} 1`] = `
+<div>
+  
+
+
+            
+  
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row row--fill-width custom-row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-1 custom-col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 12,
+  row_class: 'custom-row',
+  column_class: null,
+  fill_width: false,
+  expectedRowClass: 'row custom-row',
+  expectedColumnClass: 'col-xxs-12 col-m-1'
+} 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row custom-row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-1"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 12,
+  row_class: 'custom-row',
+  column_class: null,
+  fill_width: true,
+  expectedRowClass: 'row row--fill-width custom-row',
+  expectedColumnClass: 'col-xxs-12 col-m-1'
+} 1`] = `
+<div>
+  
+
+
+            
+  
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row row--fill-width custom-row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-1"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 12,
+  row_class: null,
+  column_class: null,
+  fill_width: false,
+  expectedRowClass: 'row',
+  expectedColumnClass: 'col-xxs-12 col-m-1'
+} 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-1"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: 12,
+  row_class: null,
+  column_class: null,
+  fill_width: true,
+  expectedRowClass: 'row row--fill-width',
+  expectedColumnClass: 'col-xxs-12 col-m-1'
+} 1`] = `
+<div>
+  
+
+
+            
+  
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row row--fill-width"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-1"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: null,
+  row_class: null,
+  column_class: null,
+  fill_width: false,
+  expectedRowClass: 'row',
+  expectedColumnClass: 'col'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Classes renders {
+  template_column_count: null,
+  row_class: null,
+  column_class: null,
+  fill_width: true,
+  expectedRowClass: 'row row--fill-width',
+  expectedColumnClass: 'col'
+} 1`] = `
+<div>
+  
+
+
+    
+  
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row row--fill-width"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Elements renders { row_element: 'div', column_element: 'div' } 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Custom Elements renders { row_element: 'section', column_element: 'span' } 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <section
+      class="row"
+    >
+      
+                        
+      <span
+        class="col"
+      >
+        
+            1
+          
+      </span>
+      
+                  
+    </section>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Row Fill Width renders { fill_width: false } 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Row Fill Width renders { fill_width: true } 1`] = `
+<div>
+  
+
+
+    
+  
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row row--fill-width"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns (no auto breakpoint) renders { template_column_count: 1 } 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-12"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns (no auto breakpoint) renders { template_column_count: 2 } 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-6"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns (no auto breakpoint) renders { template_column_count: 3 } 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-4"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns (no auto breakpoint) renders { template_column_count: 4 } 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-3"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns (no auto breakpoint) renders { template_column_count: 6 } 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-2"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns (no auto breakpoint) renders { template_column_count: 12 } 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-1"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns with Auto Breakpoint renders { template_column_count: 1 } 1`] = `
+<div>
+  
+
+
+                                                                                    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns with Auto Breakpoint renders { template_column_count: 2 } 1`] = `
+<div>
+  
+
+
+                                                                                                                                                
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-6"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns with Auto Breakpoint renders { template_column_count: 3 } 1`] = `
+<div>
+  
+
+
+                                                                                                                                                                                                            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-6 col-xl-4"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns with Auto Breakpoint renders { template_column_count: 4 } 1`] = `
+<div>
+  
+
+
+                                                                                                                                                                                                                                                                        
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-6 col-xl-4 col-xxl-3"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns with Auto Breakpoint renders { template_column_count: 6 } 1`] = `
+<div>
+  
+
+
+                                                                                                                                                                                                                                                                                            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-6 col-xl-4 col-xxl-2"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid Template Columns with Auto Breakpoint renders { template_column_count: 12 } 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-1"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: false,
+  attributes: [DrupalAttribute [Map]],
+  modifier_class: 'custom-modifier',
+  description: 'attributes and modifier class without container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+              
+      
+  <div
+    class="row  custom-modifier"
+    data-test="true"
+  >
+    
+                        
+    <div
+      class="col"
+    >
+      
+            1
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: false,
+  description: 'multiple items without container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+        
+      
+  <div
+    class="row"
+  >
+    
+                        
+    <div
+      class="col"
+    >
+      
+            1
+          
+    </div>
+    
+                                
+    <div
+      class="col"
+    >
+      
+            2
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: false,
+  description: 'without container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+        
+      
+  <div
+    class="row"
+  >
+    
+                        
+    <div
+      class="col"
+    >
+      
+            1
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: false,
+  fill_width: true,
+  description: 'fill width without container'
+} 1`] = `
+<div>
+  
+
+
+    
+  
+  
+        
+      
+  <div
+    class="row row--fill-width"
+  >
+    
+                        
+    <div
+      class="col"
+    >
+      
+            1
+          
+    </div>
+    
+                                
+    <div
+      class="col"
+    >
+      
+            2
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: false,
+  row_class: 'custom-row',
+  column_class: 'custom-col',
+  description: 'custom classes without container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+        
+      
+  <div
+    class="row custom-row"
+  >
+    
+                        
+    <div
+      class="col custom-col"
+    >
+      
+            1
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: false,
+  row_element: 'section',
+  column_element: 'span',
+  description: 'custom elements without container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+        
+      
+  <section
+    class="row"
+  >
+    
+                        
+    <span
+      class="col"
+    >
+      
+            1
+          
+    </span>
+    
+                                
+    <span
+      class="col"
+    >
+      
+            2
+          
+    </span>
+    
+                  
+  </section>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: false,
+  template_column_count: 3,
+  description: 'column count without container'
+} 1`] = `
+<div>
+  
+
+
+            
+
+  
+        
+      
+  <div
+    class="row"
+  >
+    
+                        
+    <div
+      class="col-xxs-12 col-m-4"
+    >
+      
+            1
+          
+    </div>
+    
+                                
+    <div
+      class="col-xxs-12 col-m-4"
+    >
+      
+            2
+          
+    </div>
+    
+                                
+    <div
+      class="col-xxs-12 col-m-4"
+    >
+      
+            3
+          
+    </div>
+    
+                  
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: true,
+  attributes: [DrupalAttribute [Map]],
+  modifier_class: 'custom-modifier',
+  description: 'attributes and modifier class with container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container custom-modifier"
+    data-test="true"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: true,
+  description: 'multiple items with container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                                
+      <div
+        class="col"
+      >
+        
+            2
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: true,
+  fill_width: true,
+  description: 'fill width with container'
+} 1`] = `
+<div>
+  
+
+
+    
+  
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row row--fill-width"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                                
+      <div
+        class="col"
+      >
+        
+            2
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: true,
+  is_fluid: true,
+  description: 'multiple items with fluid container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container-fluid"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                                
+      <div
+        class="col"
+      >
+        
+            2
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: true,
+  row_class: 'custom-row',
+  column_class: 'custom-col',
+  description: 'custom classes with container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row custom-row"
+    >
+      
+                        
+      <div
+        class="col custom-col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: true,
+  row_element: 'section',
+  column_element: 'span',
+  description: 'custom elements with container'
+} 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <section
+      class="row"
+    >
+      
+                        
+      <span
+        class="col"
+      >
+        
+            1
+          
+      </span>
+      
+                                
+      <span
+        class="col"
+      >
+        
+            2
+          
+      </span>
+      
+                  
+    </section>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: true,
+  template_column_count: 3,
+  description: 'column count with container'
+} 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-4"
+      >
+        
+            1
+          
+      </div>
+      
+                                
+      <div
+        class="col-xxs-12 col-m-4"
+      >
+        
+            2
+          
+      </div>
+      
+                                
+      <div
+        class="col-xxs-12 col-m-4"
+      >
+        
+            3
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly {
+  items: [Array],
+  use_container: true,
+  template_column_count: 3,
+  is_fluid: true,
+  description: 'column count with fluid container'
+} 1`] = `
+<div>
+  
+
+
+            
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container-fluid"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col-xxs-12 col-m-4"
+      >
+        
+            1
+          
+      </div>
+      
+                                
+      <div
+        class="col-xxs-12 col-m-4"
+      >
+        
+            2
+          
+      </div>
+      
+                                
+      <div
+        class="col-xxs-12 col-m-4"
+      >
+        
+            3
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Grid renders correctly { items: [Array], use_container: true, description: 'with container' } 1`] = `
+<div>
+  
+
+
+    
+
+  
+    
+  <div
+    aria-live="polite"
+    class="container"
+  >
+    
+      
+    <div
+      class="row"
+    >
+      
+                        
+      <div
+        class="col"
+      >
+        
+            1
+          
+      </div>
+      
+                  
+    </div>
+    
+    
+  </div>
+  
+  
+</div>
+`;