@dta-au/civictheme-twig 1.13.1

package/components/00-base/item-list/item-list.test.js

@@ -0,0 +1,96 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/00-base/item-list/item-list.twig';
+
+describe('Link List Component', () => {
+  test('renders with default values', async () => {
+    const c = await dom(template, {
+      items: [
+        '<a href="/">Home</a>',
+        '<a href="/about">About</a>',
+        '<a href="/contact">Contact</a>',
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-item-list')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-item-list__item')).toHaveLength(3);
+    expect(c.querySelector('.ct-item-list__item').textContent.trim()).toEqual('Home');
+    expect(c.querySelector('.ct-item-list__item:nth-child(2)').textContent.trim()).toEqual('About');
+    expect(c.querySelector('.ct-item-list__item:nth-child(3)').textContent.trim()).toEqual('Contact');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with vertical direction', async () => {
+    const c = await dom(template, {
+      direction: 'vertical',
+      items: [
+        '<a href="/">Home</a>',
+        '<a href="/about">About</a>',
+        '<a href="/contact">Contact</a>',
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-item-list.ct-item-list--vertical')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-item-list__item')).toHaveLength(3);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with large size', async () => {
+    const c = await dom(template, {
+      size: 'large',
+      items: [
+        '<a href="/">Home</a>',
+        '<a href="/about">About</a>',
+        '<a href="/contact">Contact</a>',
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-item-list.ct-item-list--large')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-item-list__item')).toHaveLength(3);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders without gaps', async () => {
+    const c = await dom(template, {
+      no_gap: true,
+      items: [
+        '<a href="/">Home</a>',
+        '<a href="/about">About</a>',
+        '<a href="/contact">Contact</a>',
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-item-list.ct-item-list--no-gap')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-item-list__item')).toHaveLength(3);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with custom attributes and classes', async () => {
+    const c = await dom(template, {
+      items: [
+        '<a href="/">Home</a>',
+        '<a href="/about">About</a>',
+        '<a href="/contact">Contact</a>',
+      ],
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-modifier',
+    });
+
+    expect(c.querySelectorAll('.ct-item-list.custom-modifier')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-item-list[data-test="true"]')).toHaveLength(1);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when items are empty', async () => {
+    const c = await dom(template, {
+      items: [],
+    });
+
+    expect(c.querySelectorAll('.ct-item-list')).toHaveLength(0);
+  });
+});

package/components/00-base/item-list/item-list.twig

@@ -0,0 +1,35 @@
+{#
+/**
+ * @file
+ * CivicTheme Item List component.
+ *
+ * Props:
+ * - direction: [string] List direction (horizontal or vertical).
+ * - size: [string] List size (large, regular, or small).
+ * - no_gap: [boolean] Whether to render without gaps.
+ * - items: [array] List items.
+ *   Each item contains:
+ *   - items [string]
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set direction = direction in ['horizontal', 'vertical'] ? direction : 'horizontal' %}
+{% set size = size in ['small', 'regular', 'large'] ? size : 'regular' %}
+{% set direction_class = 'ct-item-list--%s'|format(direction) %}
+{% set size_class = 'ct-item-list--%s'|format(size) %}
+{% set no_gap_class = no_gap ? 'ct-item-list--no-gap' : '' %}
+{% set modifier_class = '%s %s %s %s'|format(direction_class, size_class, no_gap_class, modifier_class|default('')) %}
+
+{% if items %}
+  <ul class="ct-item-list {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% for item in items %}
+      {% if item is not empty %}
+        <li class="ct-item-list__item">
+          {{- item -}}
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+{% endif %}

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

@@ -0,0 +1,520 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout Component hides sidebars when specified - contained 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-sidebar-left ct-layout--no-sidebar-right ct-layout--no-top-left ct-layout--no-top-right ct-layout--no-bottom-left ct-layout--no-bottom-right"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+      
+      
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component hides sidebars when specified 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-sidebar-left ct-layout--no-sidebar-right ct-layout--no-top-left ct-layout--no-top-right ct-layout--no-bottom-left ct-layout--no-bottom-right"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container-fluid"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+      
+      
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component only main - contained 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-top-left ct-layout--no-top-right ct-layout--no-bottom-left ct-layout--no-bottom-right"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+      
+      
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component only main - not contained 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-top-left ct-layout--no-top-right ct-layout--no-bottom-left ct-layout--no-bottom-right"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container-fluid"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+      
+      
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component renders with all sidebars and content sections 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-vertical-spacing--top"
+    role="main"
+  >
+    
+          Top content    
+    
+    <div
+      class="ct-layout__inner container"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+                        
+      <aside
+        class="ct-layout__sidebar_top_left"
+      >
+        Top left sidebar
+      </aside>
+      
+              
+                        
+      <aside
+        class="ct-layout__sidebar_top_right"
+      >
+        Top right sidebar
+      </aside>
+      
+              
+                        
+      <aside
+        class="ct-layout__sidebar_bottom_left"
+      >
+        Bottom left sidebar
+      </aside>
+      
+              
+                        
+      <aside
+        class="ct-layout__sidebar_bottom_right"
+      >
+        Bottom right sidebar
+      </aside>
+      
+                  
+    </div>
+    
+
+          Bottom content      
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component renders with custom attributes and classes 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-top-left ct-layout--no-top-right ct-layout--no-bottom-left ct-layout--no-bottom-right  custom-modifier"
+    data-test="true"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container-fluid"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+      
+      
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component renders with default values 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-top-left ct-layout--no-top-right ct-layout--no-bottom-left ct-layout--no-bottom-right"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container-fluid"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+      
+      
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component renders with sidebar bottom left 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-top-left ct-layout--no-top-right  ct-layout--no-bottom-right ct-vertical-spacing--top"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+      
+                        
+      <aside
+        class="ct-layout__sidebar_bottom_left"
+      >
+        Bottom left sidebar
+      </aside>
+      
+              
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component renders with sidebar bottom right 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-top-left ct-layout--no-top-right ct-layout--no-bottom-left  ct-vertical-spacing--top"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+      
+      
+                        
+      <aside
+        class="ct-layout__sidebar_bottom_right"
+      >
+        Bottom right sidebar
+      </aside>
+      
+                  
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component renders with sidebar top left 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-top-right ct-layout--no-bottom-left ct-layout--no-bottom-right ct-vertical-spacing--top"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+                        
+      <aside
+        class="ct-layout__sidebar_top_left"
+      >
+        Top left sidebar
+      </aside>
+      
+              
+      
+      
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;
+
+exports[`Layout Component renders with sidebar top right 1`] = `
+<div>
+  
+
+
+
+
+
+  
+  <main
+    class="ct-layout ct-layout--no-top-left  ct-layout--no-bottom-left ct-layout--no-bottom-right ct-vertical-spacing--top"
+    role="main"
+  >
+    
+              
+    
+    <div
+      class="ct-layout__inner container"
+    >
+      
+                        
+      <section
+        class="ct-layout__main"
+      >
+        Main content
+      </section>
+      
+              
+      
+                        
+      <aside
+        class="ct-layout__sidebar_top_right"
+      >
+        Top right sidebar
+      </aside>
+      
+              
+      
+          
+    </div>
+    
+
+                
+  </main>
+  
+
+</div>
+`;