@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,81 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/03-organisms/campaign/campaign.twig';
+
+describe('Campaign Component', () => {
+  test('renders with attributes', async () => {
+    const c = await dom(template, {
+      title: 'Campaign Title',
+      content: 'This is the main content of the campaign.',
+      content_top: 'Top content',
+      image: {
+        url: 'http://example.com/image.jpg',
+        alt: 'Example Image',
+      },
+      image_position: 'left',
+      tags: ['Tag1', 'Tag2'],
+      date: '2024-06-19',
+      links: [
+        { text: 'Link 1', url: 'http://example.com/1', is_new_window: true, is_external: true },
+        { text: 'Link 2', url: 'http://example.com/2', is_new_window: false, is_external: false },
+      ],
+      content_bottom: 'Bottom content',
+      theme: 'dark',
+      vertical_spacing: 'both',
+      modifier_class: 'custom-class',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+    });
+
+    const element = c.querySelector('.ct-campaign');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('ct-vertical-spacing-inset--both')).toBe(true);
+    expect(element.classList.contains('ct-campaign--image-left')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+    expect(element.querySelector('.ct-campaign__content-top').textContent.trim()).toEqual('Top content');
+    expect(element.querySelector('.ct-campaign__title').textContent.trim()).toEqual('Campaign Title');
+    expect(element.querySelector('.ct-campaign__date').textContent.trim()).toEqual('2024-06-19');
+    expect(element.querySelector('.ct-campaign__content').textContent.trim()).toEqual('This is the main content of the campaign.');
+    expect(element.querySelector('.ct-campaign__content-bottom').textContent.trim()).toEqual('Bottom content');
+    expect(element.querySelector('.ct-campaign__image img').src).toContain('http://example.com/image.jpg');
+    expect(element.querySelector('.ct-campaign__image img').alt).toEqual('Example Image');
+
+    const links = element.querySelectorAll('.ct-campaign__links .ct-button');
+    expect(links).toHaveLength(2);
+    expect(links[0].textContent.trim()).toContain('Link 1');
+    expect(links[0].getAttribute('href')).toEqual('http://example.com/1');
+    expect(links[0].getAttribute('target')).toEqual('_blank');
+    expect(links[1].textContent.trim()).toEqual('Link 2');
+    expect(links[1].getAttribute('href')).toEqual('http://example.com/2');
+    expect(links[1].getAttribute('target')).toBeNull();
+  });
+
+  test('renders with tags', async () => {
+    const c = await dom(template, {
+      tags: ['Tag1', 'Tag2'],
+    });
+
+    const tags = c.querySelectorAll('.ct-campaign__tags .ct-tag');
+    expect(tags).toHaveLength(2);
+    expect(tags[0].textContent.trim()).toEqual('Tag1');
+    expect(tags[1].textContent.trim()).toEqual('Tag2');
+  });
+
+  test('renders with image position right', async () => {
+    const c = await dom(template, {
+      image_position: 'right',
+      image: {
+        url: 'http://example.com/image.jpg',
+        alt: 'Example Image',
+      },
+    });
+    const element = c.querySelector('.ct-campaign');
+    expect(element.classList.contains('ct-campaign--image-left')).toBe(false);
+    expect(element.classList.contains('ct-campaign--image-right')).toBe(true);
+    const imageWrapper = c.querySelector('.ct-campaign__image');
+    expect(imageWrapper).not.toBeNull();
+    expect(imageWrapper.querySelector('img').src).toContain('http://example.com/image.jpg');
+    expect(imageWrapper.querySelector('img').alt).toEqual('Example Image');
+  });
+});

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

@@ -0,0 +1,152 @@
+{#
+/**
+ * @file
+ * CivicTheme Campaign component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - image_position: [string] Image position relative to content (left or right).
+ * - vertical_spacing: [string] Campaign vertical spacing (top, bottom, or both).
+ * - modifier_class: [string] Additional CSS classes.
+ * - image: [object] Campaign image.
+ *   Each property contains:
+ *   - url: [string] Image URL.
+ *   - alt: [string] Image alt text.
+ * - tags: [array] Campaign tags:
+ *   Each item contains:
+ *   - content: [string] Tag text.
+ *   - url: [string] Tag URL.
+ *   - is_new_window: [boolean] Whether to open tag in a new window.
+ * - links: [array] Campaign links:
+ *   Each item contains:
+ *   - text: [string] Link text.
+ *   - url: [string] Link URL.
+ *   - is_new_window: [boolean] Whether to open link in a new window.
+ *   - is_external: [boolean] Whether the link is external.
+ * - date: [string,null] Campaign date.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - content_top: Top content.
+ * - title: Campaign title.
+ * - content: Campaign main content.
+ * - content_bottom: Bottom campaign content.
+ *
+ * Blocks:
+ * - content_top_block
+ * - tags_block
+ * - content_block
+ * - links_block
+ * - content_bottom_block
+ * - image_block
+ */
+#}
+
+{% set image_position = image_position in ['left', 'right'] ? image_position : 'right' %}
+{% set image_position_class = 'ct-campaign--image-%s'|format(image_position) %}
+{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing-inset--%s'|format(vertical_spacing) : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s'|format(theme_class, vertical_spacing_class, image_position_class, modifier_class|default('')) %}
+
+<div class="ct-campaign {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+  <div class="container">
+    <div class="row row--vertically-spaced">
+      <div class="col-xxs-12 {% if image_position == 'right' %}col-m-5 col-m-offset-1{% else %}col-m-5 col-m-offset-1{% endif %} ct-flex-align-self-center">
+        <div class="ct-campaign__inner">
+          {% block content_top_block %}
+            {% if content_top is not empty %}
+              <div class="ct-campaign__content-top">
+                {{ content_top }}
+              </div>
+            {% endif %}
+          {% endblock %}
+
+          {% block tags_block %}
+            {% if tags %}
+              {% include '@molecules/tag-list/tag-list.twig' with {
+                theme: theme,
+                tags: tags,
+                modifier_class: 'ct-campaign__tags',
+              } only %}
+            {% endif %}
+          {% endblock %}
+
+          {% block content_block %}
+            {% if title is not empty %}
+              {% include '@atoms/heading/heading.twig' with {
+                theme: theme,
+                content: title,
+                level: 2,
+                modifier_class: 'ct-campaign__title',
+              } only %}
+            {% endif %}
+
+            {% if date is not empty %}
+              {% include '@atoms/tag/tag.twig' with {
+                theme: theme,
+                content: date,
+                type: 'tertiary',
+                modifier_class: 'ct-campaign__date',
+              } only %}
+            {% endif %}
+
+            {% if content is not empty %}
+              {% include '@atoms/paragraph/paragraph.twig' with {
+                theme: theme,
+                content: content,
+                modifier_class: 'ct-campaign__content',
+              } only %}
+            {% endif %}
+
+            {% block links_block %}
+              {% if links is not empty %}
+                {% set link_items = [] %}
+                {% for link in links %}
+                  {% set link_item %}
+                    {% include '@atoms/button/button.twig' with {
+                      theme: theme,
+                      kind: 'link',
+                      type: loop.index == 1 ? 'primary' : 'tertiary',
+                      text: link.text,
+                      url: link.url,
+                      is_new_window: link.is_new_window,
+                      is_external: link.is_external,
+                    } only %}
+                  {% endset %}
+                  {% set link_items = link_items|merge([link_item]) %}
+                {% endfor %}
+
+                {% include '@base/item-list/item-list.twig' with {
+                  items: link_items,
+                  size: 'regular',
+                  modifier_class: 'ct-campaign__links ct-item-list--horizontal-middle',
+                } only %}
+              {% endif %}
+            {% endblock %}
+          {% endblock %}
+
+          {% block content_bottom_block %}
+            {% if content_bottom is not empty %}
+              <div class="ct-campaign__content-bottom">
+                {{ content_bottom }}
+              </div>
+            {% endif %}
+          {% endblock %}
+        </div>
+      </div>
+      <div class="col-xxs-12 first {% if image_position == 'right' %}col-m-5 col-m-offset-1 last-m{% else %}col-m-5 first-m{% endif %} ct-flex-align-self-start">
+        {% block image_block %}
+          {% if image is not empty %}
+            <div class="ct-campaign__image">
+              {% include '@atoms/image/image.twig' with {
+                theme: theme,
+                url: image.url,
+                alt: image.alt,
+              } only %}
+            </div>
+          {% endif %}
+        {% endblock %}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,354 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer Component does not render when all slots are empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Footer Component renders with all attributes provided 1`] = `
+<div>
+  
+
+  
+  <footer
+    class="ct-footer ct-theme-dark additional-class"
+    data-component-name="ct-footer"
+    role="contentinfo"
+    style="background-image: url('path/to/image.jpg')"
+  >
+    
+
+          
+    <div
+      class="container ct-footer__top"
+    >
+      
+        
+      <div
+        class="row"
+      >
+        
+
+                        
+        <div
+          class="col-xxs-12 col-m-6"
+        >
+          
+                
+          <div
+            class="ct-footer__top__content-top1"
+          >
+            Top content 1
+          </div>
+          
+              
+        </div>
+        
+            
+                        
+        <div
+          class="col-xxs-12 col-m-6"
+        >
+          
+                
+          <div
+            class="ct-footer__top__content-top2"
+          >
+            Top content 2
+          </div>
+          
+              
+        </div>
+        
+            
+        
+      </div>
+      
+      
+    </div>
+    
+    
+          
+    <div
+      class="container ct-footer__middle"
+    >
+      
+        
+      <div
+        class="row"
+      >
+        
+
+                        
+        <div
+          class="col-xxs-12 col-m-3"
+        >
+          
+                
+          <div
+            class="ct-footer__middle__content-middle1"
+          >
+            Middle content 1
+          </div>
+          
+              
+        </div>
+        
+            
+                        
+        <div
+          class="col-xxs-12 col-m-3"
+        >
+          
+                
+          <div
+            class="ct-footer__middle__content-middle2"
+          >
+            Middle content 2
+          </div>
+          
+              
+        </div>
+        
+            
+                        
+        <div
+          class="col-xxs-12 col-m-3"
+        >
+          
+                
+          <div
+            class="ct-footer__middle__content-middle3"
+          >
+            Middle content 3
+          </div>
+          
+              
+        </div>
+        
+            
+                        
+        <div
+          class="col-xxs-12 col-m-3"
+        >
+          
+                
+          <div
+            class="ct-footer__middle__content-middle4"
+          >
+            Middle content 4
+          </div>
+          
+              
+        </div>
+        
+            
+                        
+        <div
+          class="col-xxs-12"
+        >
+          
+                
+          <div
+            class="ct-footer__middle__content-middle5"
+          >
+            Middle content 5
+          </div>
+          
+              
+        </div>
+        
+            
+        
+      </div>
+      
+      
+    </div>
+    
+    
+          
+    <div
+      class="container ct-footer__bottom"
+    >
+      
+        
+      <div
+        class="row"
+      >
+        
+
+                        
+        <div
+          class="col-xxs-12 col-m-7"
+        >
+          
+                
+          <div
+            class="ct-footer__bottom__content-bottom1"
+          >
+            Bottom content 1
+          </div>
+          
+              
+        </div>
+        
+            
+                        
+        <div
+          class="col-xxs-12 col-m-5"
+        >
+          
+                
+          <div
+            class="ct-footer__bottom__content-bottom2"
+          >
+            Bottom content 2
+          </div>
+          
+              
+        </div>
+        
+            
+        
+      </div>
+      
+      
+    </div>
+    
+    
+  
+  </footer>
+  
+
+</div>
+`;
+
+exports[`Footer Component renders with some attributes missing 1`] = `
+<div>
+  
+
+  
+  <footer
+    class="ct-footer ct-theme-light "
+    data-component-name="ct-footer"
+    role="contentinfo"
+  >
+    
+
+          
+    <div
+      class="container ct-footer__top"
+    >
+      
+        
+      <div
+        class="row"
+      >
+        
+
+                        
+        <div
+          class="col-xxs-12 col-m-6"
+        >
+          
+                
+          <div
+            class="ct-footer__top__content-top1"
+          >
+            Top content 1
+          </div>
+          
+              
+        </div>
+        
+            
+          
+        
+      </div>
+      
+      
+    </div>
+    
+    
+          
+    <div
+      class="container ct-footer__middle"
+    >
+      
+        
+      <div
+        class="row"
+      >
+        
+
+          
+                        
+        <div
+          class="col-xxs-12 col-m-3"
+        >
+          
+                
+          <div
+            class="ct-footer__middle__content-middle2"
+          >
+            Middle content 2
+          </div>
+          
+              
+        </div>
+        
+            
+          
+          
+          
+        
+      </div>
+      
+      
+    </div>
+    
+    
+          
+    <div
+      class="container ct-footer__bottom"
+    >
+      
+        
+      <div
+        class="row"
+      >
+        
+
+                        
+        <div
+          class="col-xxs-12 col-m-7"
+        >
+          
+                
+          <div
+            class="ct-footer__bottom__content-bottom1"
+          >
+            Bottom content 1
+          </div>
+          
+              
+        </div>
+        
+            
+          
+        
+      </div>
+      
+      
+    </div>
+    
+    
+  
+  </footer>
+  
+
+</div>
+`;

package/components/03-organisms/footer/footer.scss

@@ -0,0 +1,114 @@
+//
+// CivicTheme Footer component styles.
+//
+
+.ct-footer {
+  $root: &;
+
+  @include ct-print-hide();
+  @include ct-background();
+
+  &__top {
+    border-bottom: solid ct-particle(0.125) transparent;
+
+    .row {
+      padding-top: ct-spacing(4);
+      padding-bottom: ct-spacing(2);
+
+      @include ct-breakpoint(m) {
+        padding-top: ct-spacing(5);
+        padding-bottom: ct-spacing(5);
+      }
+    }
+  }
+
+  &__top__content-top1 {
+    // stylelint-disable-block block-no-empty
+  }
+
+  &__top__content-top2 {
+    @include ct-breakpoint-upto(m) {
+      margin-top: ct-spacing(3);
+    }
+  }
+
+  &__middle {
+    border-bottom: solid ct-particle(0.125) transparent;
+
+    .row {
+      padding-top: ct-spacing(2);
+      padding-bottom: ct-spacing(2);
+
+      @include ct-breakpoint(m) {
+        padding-top: ct-spacing(5);
+        padding-bottom: ct-spacing(5);
+      }
+    }
+  }
+
+  &__bottom {
+    padding-top: ct-spacing(2);
+    padding-bottom: ct-spacing(4);
+
+    @include ct-breakpoint(m) {
+      padding-top: ct-spacing(5);
+      padding-bottom: ct-spacing(5);
+    }
+  }
+
+  &__bottom__content-bottom2 {
+    @include ct-breakpoint-upto(m) {
+      margin-top: ct-spacing(3);
+    }
+  }
+
+  .copyright {
+    @include ct-breakpoint(m) {
+      text-align: right;
+    }
+  }
+
+  .ct-social-links {
+    @include ct-breakpoint(m) {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  .ct-navigation {
+    @include ct-breakpoint-upto(m) {
+      margin-bottom: ct-spacing(3);
+    }
+  }
+
+  [data-collapsible='true'] {
+    margin-bottom: 0;
+
+    [data-collapsible-trigger] {
+      padding: ct-spacing(2) ct-spacing();
+      margin-bottom: 0;
+    }
+
+    [data-collapsible-panel] {
+      padding-left: ct-spacing();
+      padding-right: ct-spacing();
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, background-color);
+    @include ct-component-property($root, $theme, color);
+
+    #{$root}__top {
+      @include ct-breakpoint(m) {
+        @include ct-component-property($root, $theme, border-color);
+      }
+    }
+
+    #{$root}__middle {
+      @include ct-breakpoint(m) {
+        @include ct-component-property($root, $theme, border-color);
+      }
+    }
+  }
+}