@dta-au/civictheme-twig 1.13.1

package/components/03-organisms/header/header.test.js

@@ -0,0 +1,72 @@
+const template = 'components/03-organisms/header/header.twig';
+
+describe('Header Component', () => {
+  test('renders with all attributes provided', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      content_top1: 'Top content 1',
+      content_top2: 'Top content 2',
+      content_top3: 'Top content 3',
+      content_middle1: 'Middle content 1',
+      content_middle2: 'Middle content 2',
+      content_middle3: 'Middle content 3',
+      content_bottom1: 'Bottom content 1',
+      modifier_class: 'additional-class',
+    });
+
+    expect(c.querySelectorAll('.ct-header')).toHaveLength(1);
+    expect(c.querySelector('.ct-header').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-header').classList).toContain('additional-class');
+    expect(c.querySelector('.ct-header__content-top1').textContent).toContain('Top content 1');
+    expect(c.querySelector('.ct-header__content-top2').textContent).toContain('Top content 2');
+    expect(c.querySelector('.ct-header__content-top3').textContent).toContain('Top content 3');
+    expect(c.querySelector('.ct-header__content-middle1').textContent).toContain('Middle content 1');
+    expect(c.querySelector('.ct-header__content-middle2').textContent).toContain('Middle content 2');
+    expect(c.querySelector('.ct-header__content-middle3').textContent).toContain('Middle content 3');
+    expect(c.querySelector('.ct-header__content-bottom1').textContent).toContain('Bottom content 1');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with some attributes missing', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      content_top1: 'Top content 1',
+      content_top2: '',
+      content_top3: '',
+      content_middle1: '',
+      content_middle2: 'Middle content 2',
+      content_middle3: '',
+      content_bottom1: 'Bottom content 1',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-header')).toHaveLength(1);
+    expect(c.querySelector('.ct-header').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-header__content-top1').textContent).toContain('Top content 1');
+    expect(c.querySelector('.ct-header__content-top2')).toBeNull();
+    expect(c.querySelector('.ct-header__content-top3')).toBeNull();
+    expect(c.querySelector('.ct-header__content-middle1')).toBeNull();
+    expect(c.querySelector('.ct-header__content-middle2').textContent).toContain('Middle content 2');
+    expect(c.querySelector('.ct-header__content-middle3')).toBeNull();
+    expect(c.querySelector('.ct-header__content-bottom1').textContent).toContain('Bottom content 1');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when all slots are empty', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      content_top1: '',
+      content_top2: '',
+      content_top3: '',
+      content_middle1: '',
+      content_middle2: '',
+      content_middle3: '',
+      content_bottom1: '',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-header')).toHaveLength(0);
+  });
+});

package/components/03-organisms/header/header.twig

@@ -0,0 +1,141 @@
+{#
+/**
+ * @file
+ * CivicTheme Header component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - content_top1: Top section first content slot.
+ * - content_top2: Top section second content slot.
+ * - content_top3: Top section third content slot.
+ * - content_middle1: Middle section first content slot.
+ * - content_middle2: Middle section second content slot.
+ * - content_middle3: Middle section third content slot.
+ * - content_bottom1: Bottom section content slot.
+ *
+ * Blocks:
+ * - content_top1_block
+ * - content_top2_block
+ * - content_top3_block
+ * - content_middle1_block
+ * - content_middle2_block
+ * - content_middle3_block
+ * - content_bottom1_block
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+{% if content_top1 is not empty or content_top2 is not empty or content_top3 is not empty or content_middle1 is not empty or content_middle2 is not empty or content_middle3 is not empty or content_bottom1 is not empty %}
+  <header class="ct-header {{ modifier_class -}}" role="banner" {% if attributes %}{{ attributes }}{% endif %}>
+
+    {% if content_top1 is not empty or content_top2 is not empty or content_top3 is not empty %}
+      <div class="ct-header__top hide-xxs show-m">
+
+        {% if content_top1 is not empty %}
+          {% block content_top1_block %}
+            <div class="container">
+              <div class="row">
+                <div class="col-xxs-12">
+                  <div class="ct-header__content-top1">
+                    {{ content_top1 }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          {% endblock %}
+        {% endif %}
+
+        {% if content_top2 is not empty or content_top3 is not empty %}
+          <div class="container">
+            <div class="row">
+
+              {% block content_top2_block %}
+                <div class="col-xxs-12 col-m-4">
+                  <div class="ct-header__content-top2">
+                    {{ content_top2 }}
+                  </div>
+                </div>
+              {% endblock %}
+
+              {% block content_top3_block %}
+                <div class="col-xxs-12 col-m-8">
+                  <div class="ct-header__content-top3">
+                    {{ content_top3 }}
+                  </div>
+                </div>
+              {% endblock %}
+
+            </div>
+          </div>
+        {% endif %}
+      </div>
+    {% endif %}
+
+    {% if content_middle1 is not empty or content_middle2 is not empty or content_middle3 is not empty %}
+      <div class="ct-header__middle">
+
+        {% if content_middle1 is not empty %}
+          {% block content_middle1_block %}
+            <div class="container">
+              <div class="row">
+                <div class="col-xxs-12">
+                  <div class="ct-header__content-middle1">
+                    {{ content_middle1 }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          {% endblock %}
+        {% endif %}
+
+        {% if content_middle2 is not empty or content_middle3 is not empty %}
+          <div class="container">
+            <div class="row row--no-wrap">
+              {% if content_middle2 is not empty %}
+                {% block content_middle2_block %}
+                  <div class="col col--no-grow">
+                    <div class="ct-header__content-middle2">
+                      {{ content_middle2 }}
+                    </div>
+                  </div>
+                {% endblock %}
+              {% endif %}
+
+              {% if content_middle3 is not empty %}
+                {% block content_middle3_block %}
+                  <div class="col">
+                    <div class="ct-header__content-middle3">
+                      {{ content_middle3 }}
+                    </div>
+                  </div>
+                {% endblock %}
+              {% endif %}
+            </div>
+          </div>
+        {% endif %}
+      </div>
+    {% endif %}
+
+    {% if content_bottom1 is not empty %}
+      <div class="ct-header__bottom">
+        {% block content_bottom1_block %}
+          <div class="container">
+            <div class="row">
+              <div class="col-xxs-12">
+                <div class="ct-header__content-bottom1">
+                  {{ content_bottom1 }}
+                </div>
+              </div>
+            </div>
+          </div>
+        {% endblock %}
+      </div>
+    {% endif %}
+  </header>
+{% endif %}

package/components/03-organisms/list/__snapshots__/list.test.js.snap

@@ -0,0 +1,454 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List Component renders with all attributes provided 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-list ct-theme-dark ct-list--with-background ct-vertical-spacing-inset--both additional-class"
+    data-test="true"
+  >
+    
+  
+    <div
+      class="ct-list__inner"
+    >
+      
+                  
+      <div
+        class="ct-list__header"
+      >
+        
+          
+        <div
+          class="container"
+        >
+          
+            
+          <div
+            class="row"
+          >
+            
+              
+            <div
+              class="col-xxs-12 col-m-9"
+            >
+              
+                                  
+
+
+  
+              <h2
+                class="ct-heading ct-theme-dark ct-list__title"
+              >
+                Sample Title
+              </h2>
+              
+                                                
+            </div>
+            
+              
+            <div
+              class="col-xxs-12 col-m-3"
+            >
+              
+                                                      
+              <div
+                class="ct-list__link-above ct-flex-justify-content-center"
+              >
+                
+                      
+
+  
+                <a
+                  class="ct-button ct-theme-dark ct-button--secondary ct-button--link ct-button--regular   ct-list__link-above__link"
+                  data-component-name="button"
+                  href="https://example.com"
+                  role="button"
+                >
+                  
+      
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Link 
+                  </span>
+                  <span
+                    class="ct-text-icon__group"
+                  >
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Above
+                    </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="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+                      />
+                      
+
+                    </svg>
+                    
+
+                  </span>
+                </a>
+                
+                    
+              </div>
+              
+                                                
+            </div>
+            
+            
+          </div>
+          
+          
+        </div>
+        
+        
+      </div>
+      
+          
+                            
+      <div
+        class="ct-list__filters"
+      >
+        
+            
+        <div
+          class="container"
+        >
+          
+              
+          <div
+            class="row"
+          >
+            
+                
+            <div
+              class="col-xxs-12"
+            >
+              
+                  Sample Filters
+                
+            </div>
+            
+              
+          </div>
+          
+            
+        </div>
+        
+          
+      </div>
+      
+              
+                          
+      <div
+        class="container ct-list__rows-above"
+      >
+        
+                
+        <div
+          class="row"
+        >
+          
+                  
+          <div
+            class="col-xxs-12"
+          >
+            
+                                                                                  Rows Above                  
+          </div>
+          
+                
+        </div>
+        
+              
+      </div>
+      
+                      
+                      
+      <div
+        class="container"
+      >
+        
+                
+        <div
+          class="row"
+        >
+          
+                  
+          <div
+            class="col-xxs-12"
+          >
+            
+                    
+            <div
+              class="ct-list__results-count"
+            >
+              10 Results
+            </div>
+            
+                  
+          </div>
+          
+                
+        </div>
+        
+              
+      </div>
+      
+                      
+          
+      <div
+        class="ct-list__rows"
+      >
+        
+            Rows Content
+          
+      </div>
+      
+
+                                    
+      <div
+        class="container ct-list__rows-below"
+      >
+        
+                
+        <div
+          class="row"
+        >
+          
+                  
+          <div
+            class="col-xxs-12"
+          >
+            
+                                                                                  Rows Below                  
+          </div>
+          
+                
+        </div>
+        
+              
+      </div>
+      
+                                    
+                        
+                  
+      <div
+        class="ct-list__link-below ct-flex-justify-content-center"
+      >
+        
+          
+
+  
+        <a
+          class="ct-button ct-theme-dark ct-button--secondary ct-button--link ct-button--large   ct-list__link-below__link"
+          data-component-name="button"
+          href="https://example.com"
+          role="button"
+        >
+          
+      
+          <span
+            class="ct-text-icon__text"
+          >
+            Link 
+          </span>
+          <span
+            class="ct-text-icon__group"
+          >
+            <span
+              class="ct-text-icon__text"
+            >
+              Below
+            </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="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+              />
+              
+
+            </svg>
+            
+
+          </span>
+        </a>
+        
+        
+      </div>
+      
+      
+              
+      <div
+        class="ct-list__results-below"
+      >
+        
+                      
+        <div
+          class="container"
+        >
+          
+              
+          <div
+            class="row"
+          >
+            
+                
+            <div
+              class="col-xxs-12"
+            >
+              
+                  
+              <div
+                class="ct-list__pagination"
+              >
+                
+                    Pagination Content
+                  
+              </div>
+              
+                
+            </div>
+            
+              
+          </div>
+          
+            
+        </div>
+        
+                  
+      </div>
+      
+          
+          
+      <footer
+        class="ct-list__footer"
+      >
+        
+          
+        <div
+          class="container"
+        >
+          
+            
+          <div
+            class="row"
+          >
+            
+              
+            <div
+              class="col-xxs-12"
+            >
+              
+                Footer Content
+              
+            </div>
+            
+            
+          </div>
+          
+          
+        </div>
+        
+        
+      </footer>
+      
+            
+    </div>
+    
+
+  </div>
+  
+
+</div>
+`;
+
+exports[`List Component renders with some attributes missing 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-list ct-theme-light   "
+  >
+    
+  
+    <div
+      class="ct-list__inner"
+    >
+      
+              
+                                  
+                    
+              
+      <div
+        class="container ct-list__empty-results"
+      >
+        
+            
+        <div
+          class="row"
+        >
+          
+              
+          <div
+            class="col-xxs-12"
+          >
+            
+                
+
+
+            <div
+              class="ct-paragraph ct-theme-light ct-paragraph--regular  ct-list__empty-results__inner"
+            >
+              No results found
+            </div>
+                          
+          </div>
+          
+            
+        </div>
+        
+          
+      </div>
+      
+                  
+          
+          
+                
+    </div>
+    
+
+  </div>
+  
+
+</div>
+`;