@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/promo-card/promo-card.test.js

@@ -0,0 +1,98 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/promo-card/promo-card.twig';
+
+describe('Promo Card Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      title: 'Promo Card Title',
+      summary: 'This is the summary of the promo card.',
+    });
+
+    expect(c.querySelectorAll('.ct-promo-card')).toHaveLength(1);
+    expect(c.querySelector('.ct-promo-card__title').textContent.trim()).toEqual('Promo Card Title');
+    expect(c.querySelector('.ct-promo-card__summary').textContent.trim()).toEqual('This is the summary of the promo card.');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      content_top: 'Top content',
+      image_over: 'Image over content',
+      content_middle: 'Middle content',
+      content_bottom: 'Bottom content',
+      image: { url: 'https://example.com/image.jpg', alt: 'Image description' },
+      subtitle: 'Subtitle text',
+      date: '2023-12-01',
+      date_iso: '2023-12-01T00:00:00Z',
+      title: 'Promo Card Title',
+      summary: 'This is the summary of the promo card.',
+      link: { text: 'Learn more', url: 'https://example.com', is_new_window: true, is_external: true },
+      tags: ['Tag1', 'Tag2'],
+      theme: 'dark',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    const element = c.querySelector('.ct-promo-card');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('ct-promo-card--with-image')).toBe(true);
+    expect(element.classList.contains('ct-promo-card--card-clickable')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+
+    expect(c.querySelector('.ct-promo-card__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-promo-card__content-bottom').textContent.trim()).toEqual('Bottom content');
+    expect(c.querySelector('.ct-promo-card__title').textContent.trim()).toContain('Promo Card Title');
+    expect(c.querySelector('.ct-promo-card__summary').textContent.trim()).toEqual('This is the summary of the promo card.');
+
+    const image = c.querySelector('.ct-promo-card__image img');
+    expect(image).toBeTruthy();
+    expect(image.getAttribute('src')).toEqual('https://example.com/image.jpg');
+    expect(image.getAttribute('alt')).toEqual('Image description');
+
+    const subtitle = c.querySelector('.ct-promo-card__subtitle');
+    expect(subtitle).toBeTruthy();
+    expect(subtitle.textContent.trim()).toEqual('Subtitle text');
+
+    const date = c.querySelector('.ct-promo-card__date');
+    expect(date).toBeTruthy();
+
+    const link = c.querySelector('.ct-promo-card__title-link');
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toEqual('https://example.com');
+    expect(link.getAttribute('target')).toEqual('_blank');
+
+    const tags = c.querySelectorAll('.ct-promo-card__tags .ct-tag');
+    expect(tags).toHaveLength(2);
+    expect(tags[0].textContent.trim()).toEqual('Tag1');
+    expect(tags[1].textContent.trim()).toEqual('Tag2');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when title is empty', async () => {
+    const c = await dom(template, {
+      title: '',
+      summary: 'This is the summary of the promo card.',
+    });
+
+    expect(c.querySelectorAll('.ct-promo-card')).toHaveLength(0);
+  });
+
+  test('renders with link when provided', async () => {
+    const c = await dom(template, {
+      title: 'Promo Card Title',
+      summary: 'This is the summary of the promo card.',
+      link: { text: 'Learn more', url: 'https://example.com' },
+    });
+
+    const link = c.querySelector('.ct-promo-card__title-link');
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toEqual('https://example.com');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/02-molecules/promo-card/promo-card.twig

@@ -0,0 +1,198 @@
+{#
+/**
+ * @file
+ * CivicTheme Promo Card component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - image: [object] Card image.
+ *   Each property contains:
+ *   - url: [string] Image URL.
+ *   - alt: [string] Image alt text.
+ * - is_title_click: [boolean] Whether to make only the title clickable instead of the whole card.
+ * - modifier_class: [string] Additional CSS classes.
+ * - date_iso: [string] Start date and time in ISO format.
+ * - date: [string] Start date and time.
+ * - date_end_iso: [string] End time in ISO format.
+ * - date_end: [string] Formatted end time.
+ * - link: [object] Card link object.
+ *   Each property contains:
+ *   - url: [string] Link URL.
+ *   - is_new_window: [boolean] Whether to open the link in a new window.
+ *   - is_external: [boolean] Whether the link is external.
+ * - subtitle: [string,null] Subtitle text.
+ * - tags: [array] Card tags:
+ *   Each item contains:
+ *   - content: [string] Tag text.
+ *   - url: [string] Tag URL.
+ *   - is_new_window: [boolean] Whether to open the tag in a new window.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - title: Card title text.
+ * - summary: Card summary.
+ * - content_top: Top content area.
+ * - image_over: Image overlay content.
+ * - content_middle: Middle content area.
+ * - content_bottom: Bottom content area.
+ *
+ * Blocks:
+ * - image_block
+ * - image_over_block
+ * - content_block
+ * - content_top_block
+ * - subtitle_block
+ * - date_block
+ * - title_block
+ * - content_middle_block
+ * - summary_block
+ * - content_tags_block
+ * - content_bottom_block
+ */
+#}
+
+{% set with_image = image.url is not empty %}
+{% set with_image_class = with_image ? 'ct-promo-card--with-image' : '' %}
+{% set with_link = link is not empty and link.url is defined and link.url is not empty %}
+{% set is_card_clickable = with_link and is_title_click is empty %}
+{% set card_clickable_class = is_card_clickable ? 'ct-promo-card--card-clickable' : '' %}
+{% set image_over_class = image_over ? 'ct-promo-card--image-over' : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s %s'|format(theme_class, with_image_class, image_over_class, card_clickable_class, modifier_class|default('')) %}
+
+{% if title is not empty %}
+  <div class="ct-promo-card {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% block image_block %}
+      {% if image.url is not empty or image_over is not empty %}
+        <div class="ct-promo-card__image">
+          {% include '@atoms/image/image.twig' with {
+            theme: theme,
+            url: image.url,
+            alt: image.alt,
+          } only %}
+
+          {% block image_over_block %}
+            {% if image_over is not empty %}
+              <div class="ct-promo-card__image__over">
+                {{ image_over }}
+              </div>
+            {% endif %}
+          {% endblock %}
+        </div>
+      {% endif %}
+    {% endblock %}
+
+    {% block content_block %}
+      <div class="ct-promo-card__content">
+        {% block content_top_block %}
+          {% if content_top is not empty %}
+            <div class="ct-promo-card__content-top">
+              {{- content_top -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block subtitle_block %}
+          {% if subtitle is not empty %}
+            <div class="ct-promo-card__subtitle">
+              {% include '@atoms/tag/tag.twig' with {
+                theme: theme,
+                type: 'tertiary',
+                content: subtitle,
+              } only %}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block date_block %}
+          {% if date is not empty %}
+            {% set date_content %}
+              {% include '@base/datetime/datetime.twig' with {
+                start: date,
+                start_iso: date_iso|default(null),
+                end: date_end|default(null),
+                end_iso: date_end_iso|default(null),
+              } only %}
+            {% endset %}
+
+            <div class="ct-promo-card__date">
+              {% include '@atoms/tag/tag.twig' with {
+                theme: theme,
+                type: date_end ? 'secondary' : 'tertiary',
+                content: date_content,
+                icon: date_end ? 'calendar-2' : null,
+                icon_placement: 'before',
+              } only %}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block title_block %}
+          {% if title is not empty %}
+            {% set title_content %}
+              {% if with_link %}
+                <a
+                  class="ct-promo-card__title-link"
+                  href="{{ link.url }}"
+                  {% if link.is_new_window %}target="_blank"{% endif %}
+                >{{ title }}</a>
+              {% else %}
+                {{ title }}
+              {% endif %}
+            {% endset %}
+            <div class='ct-promo-card__title'>{{ title_content }}</div>
+          {% endif %}
+        {% endblock %}
+
+        {% block content_middle_block %}
+          {% if content_middle is not empty %}
+            <div class="ct-promo-card__content-middle">
+              {{- content_middle -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block summary_block %}
+          {% if summary is not empty %}
+            {% include '@atoms/paragraph/paragraph.twig' with {
+              theme: theme,
+              content: summary,
+              no_margin: true,
+              modifier_class: 'ct-promo-card__summary',
+            } only %}
+          {% endif %}
+        {% endblock %}
+
+        {% block content_tags_block %}
+          {% if tags or with_link %}
+            <div class="ct-promo-card__tags">
+              {% if tags %}
+                {% include '@molecules/tag-list/tag-list.twig' with {
+                  theme: theme,
+                  tags: tags,
+                } only %}
+              {% endif %}
+
+              {% if is_card_clickable %}
+                <div class="ct-promo-card__link-graphic">
+                  {% include '@base/icon/icon.twig' with {
+                    symbol: 'right-arrow-2',
+                    size: 'regular',
+                  } only %}
+                </div>
+              {% endif %}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block content_bottom_block %}
+          {% if content_bottom is not empty %}
+            <div class="ct-promo-card__content-bottom">
+              {{- content_bottom -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+      </div>
+    {% endblock %}
+  </div>
+{% endif %}

package/components/02-molecules/publication-card/__snapshots__/publication-card.test.js.snap

@@ -0,0 +1,342 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Publication Card Component does not render when file is empty 1`] = `
+<div>
+  
+
+
+
+</div>
+`;
+
+exports[`Publication Card Component renders file link with extension and size 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-publication-card ct-theme-light   "
+  >
+    
+              
+    
+    <div
+      class="ct-publication-card__content"
+    >
+      
+                    
+                    
+                    
+                    
+                                    
+      <a
+        class="ct-link ct-theme-light     ct-publication-card__link"
+        href="https://example.com/sample.pdf"
+      >
+        <span
+          class="ct-text-icon__text"
+        >
+          Sample File (PDF, 2MB)
+        </span>
+      </a>
+                              
+                        
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Publication Card Component renders with optional attributes 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-publication-card ct-theme-dark ct-publication-card--with-image ct-publication-card--card-clickable custom-class"
+    data-test="true"
+  >
+    
+                  
+    <div
+      class="ct-publication-card__image"
+    >
+      
+          
+
+
+  
+      <img
+        alt="Image description"
+        class="ct-image ct-theme-dark "
+        src="https://example.com/image.jpg"
+      />
+      
+
+                                    
+      <div
+        class="ct-publication-card__image__over"
+      >
+        
+                Image over content
+              
+      </div>
+      
+                              
+    </div>
+    
+          
+    
+    <div
+      class="ct-publication-card__content"
+    >
+      
+                        
+      <div
+        class="ct-publication-card__content-top"
+      >
+        Top content
+      </div>
+      
+              
+                        
+          
+      <div
+        class="ct-publication-card__title-bar"
+      >
+        
+            
+        <div
+          class="ct-publication-card__title"
+        >
+                                                  
+          <a
+            aria-label="Publication Card Title. File details: Sample File (PDF, 2MB)"
+            class="ct-publication-card__title-link"
+            href="https://example.com/sample.pdf"
+          >
+            Publication Card Title
+          </a>
+          
+                      
+        </div>
+        
+            
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-regular ct-publication-card__title-icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M21 14C20.7348 14 20.4804 14.1054 20.2929 14.2929C20.1054 14.4804 20 14.7348 20 15V19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V15C4 14.7348 3.89464 14.4804 3.70711 14.2929C3.51957 14.1054 3.26522 14 3 14C2.73478 14 2.48043 14.1054 2.29289 14.2929C2.10536 14.4804 2 14.7348 2 15V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V15C22 14.7348 21.8946 14.4804 21.7071 14.2929C21.5196 14.1054 21.2652 14 21 14ZM11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.7397 15.9729 11.8691 16.0002 12 16.0002C12.1309 16.0002 12.2603 15.9729 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L16.71 11.71C16.8983 11.5217 17.0041 11.2663 17.0041 11C17.0041 10.7337 16.8983 10.4783 16.71 10.29C16.5217 10.1017 16.2663 9.99591 16 9.99591C15.7337 9.99591 15.4783 10.1017 15.29 10.29L13 12.59V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V12.59L8.71 10.29C8.61676 10.1968 8.50607 10.1228 8.38425 10.0723C8.26243 10.0219 8.13186 9.99591 8 9.99591C7.86814 9.99591 7.73757 10.0219 7.61575 10.0723C7.49393 10.1228 7.38324 10.1968 7.29 10.29C7.19676 10.3832 7.1228 10.4939 7.07234 10.6158C7.02188 10.7376 6.99591 10.8681 6.99591 11C6.99591 11.1319 7.02188 11.2624 7.07234 11.3842C7.1228 11.5061 7.19676 11.6168 7.29 11.71L11.29 15.71Z"
+          />
+          
+
+        </svg>
+        
+          
+      </div>
+      
+              
+                        
+      <div
+        class="ct-publication-card__content__middle"
+      >
+        Middle content
+      </div>
+      
+              
+                        
+
+
+      <div
+        class="ct-paragraph ct-theme-dark ct-paragraph--regular ct-paragraph--no-margin ct-publication-card__summary"
+      >
+        This is the summary of the publication card.
+      </div>
+                    
+                                    
+      <div
+        class="ct-publication-card__filename"
+      >
+        
+              
+        <span
+          class="ct-visually-hidden"
+        >
+          File details:
+        </span>
+        
+              Sample File (PDF, 2MB)
+            
+      </div>
+      
+                        
+                        
+      <div
+        class="ct-publication-card__content-bottom"
+      >
+        Bottom content
+      </div>
+      
+                  
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Publication Card Component renders with required attributes 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-publication-card ct-theme-light  ct-publication-card--card-clickable "
+  >
+    
+              
+    
+    <div
+      class="ct-publication-card__content"
+    >
+      
+                    
+                        
+          
+      <div
+        class="ct-publication-card__title-bar"
+      >
+        
+            
+        <div
+          class="ct-publication-card__title"
+        >
+                                                  
+          <a
+            aria-label="Publication Card Title. File details: Sample File (PDF, 2MB)"
+            class="ct-publication-card__title-link"
+            href="https://example.com/sample.pdf"
+          >
+            Publication Card Title
+          </a>
+          
+                      
+        </div>
+        
+            
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-regular ct-publication-card__title-icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M21 14C20.7348 14 20.4804 14.1054 20.2929 14.2929C20.1054 14.4804 20 14.7348 20 15V19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V15C4 14.7348 3.89464 14.4804 3.70711 14.2929C3.51957 14.1054 3.26522 14 3 14C2.73478 14 2.48043 14.1054 2.29289 14.2929C2.10536 14.4804 2 14.7348 2 15V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V15C22 14.7348 21.8946 14.4804 21.7071 14.2929C21.5196 14.1054 21.2652 14 21 14ZM11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.7397 15.9729 11.8691 16.0002 12 16.0002C12.1309 16.0002 12.2603 15.9729 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L16.71 11.71C16.8983 11.5217 17.0041 11.2663 17.0041 11C17.0041 10.7337 16.8983 10.4783 16.71 10.29C16.5217 10.1017 16.2663 9.99591 16 9.99591C15.7337 9.99591 15.4783 10.1017 15.29 10.29L13 12.59V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V12.59L8.71 10.29C8.61676 10.1968 8.50607 10.1228 8.38425 10.0723C8.26243 10.0219 8.13186 9.99591 8 9.99591C7.86814 9.99591 7.73757 10.0219 7.61575 10.0723C7.49393 10.1228 7.38324 10.1968 7.29 10.29C7.19676 10.3832 7.1228 10.4939 7.07234 10.6158C7.02188 10.7376 6.99591 10.8681 6.99591 11C6.99591 11.1319 7.02188 11.2624 7.07234 11.3842C7.1228 11.5061 7.19676 11.6168 7.29 11.71L11.29 15.71Z"
+          />
+          
+
+        </svg>
+        
+          
+      </div>
+      
+              
+                    
+                    
+                                    
+      <div
+        class="ct-publication-card__filename"
+      >
+        
+              
+        <span
+          class="ct-visually-hidden"
+        >
+          File details:
+        </span>
+        
+              Sample File (PDF, 2MB)
+            
+      </div>
+      
+                        
+                        
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Publication Card Component renders with summary when provided 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-publication-card ct-theme-light   "
+  >
+    
+              
+    
+    <div
+      class="ct-publication-card__content"
+    >
+      
+                    
+                    
+                    
+                        
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular ct-paragraph--no-margin ct-publication-card__summary"
+      >
+        This is the summary of the publication card.
+      </div>
+                    
+                                    
+      <a
+        class="ct-link ct-theme-light     ct-publication-card__link"
+        href="https://example.com/sample.pdf"
+      >
+        <span
+          class="ct-text-icon__text"
+        >
+          Sample File (PDF, 2MB)
+        </span>
+      </a>
+                              
+                        
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;