@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/snippet/__snapshots__/snippet.test.js.snap

@@ -0,0 +1,367 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snippet Component does not render when title is empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Snippet Component renders with content slots 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-snippet ct-theme-light "
+  >
+    
+          
+    <div
+      class="ct-snippet__content"
+    >
+      
+                              
+      <div
+        class="ct-snippet__content-top"
+      >
+        Top content
+      </div>
+      
+                  
+                                          
+      <div
+        class="ct-snippet__title"
+      >
+                                      Snippet Title
+                          
+      </div>
+      
+                  
+                              
+      <div
+        class="ct-snippet__content-middle"
+      >
+        Middle content
+      </div>
+      
+                  
+                          
+                          
+                              
+      <div
+        class="ct-snippet__content-bottom"
+      >
+        Bottom content
+      </div>
+      
+                        
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Snippet Component renders with link and tags 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-snippet ct-theme-light "
+  >
+    
+          
+    <div
+      class="ct-snippet__content"
+    >
+      
+                          
+                                          
+      <div
+        class="ct-snippet__title"
+      >
+                                      
+        <a
+          class="ct-snippet__title-link"
+          href="https://example.com/read-more"
+        >
+          Snippet Title
+        </a>
+        
+                          
+      </div>
+      
+                  
+                          
+                          
+                              
+      <div
+        class="ct-snippet__tags"
+      >
+        
+              
+
+  
+        <div
+          class="ct-tag-list ct-theme-light  "
+        >
+          
+              
+                                                                                          
+
+  
+          <ul
+            class="ct-item-list ct-item-list--horizontal ct-item-list--small  ct-tag-list__content"
+          >
+            
+                  
+            <li
+              class="ct-item-list__item"
+            >
+                                      
+
+  
+  
+  
+    
+              <span
+                class="ct-tag ct-theme-light ct-tag--primary    "
+              >
+                    Tag1  
+              </span>
+              
+          
+            </li>
+            
+                        
+            <li
+              class="ct-item-list__item"
+            >
+                                      
+
+  
+  
+  
+    
+              <span
+                class="ct-tag ct-theme-light ct-tag--primary    "
+              >
+                    Tag2  
+              </span>
+              
+          
+            </li>
+            
+            
+          </ul>
+          
+          
+                
+        </div>
+        
+            
+      </div>
+      
+                  
+                                
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Snippet Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-snippet ct-theme-dark custom-class"
+    data-test="true"
+  >
+    
+          
+    <div
+      class="ct-snippet__content"
+    >
+      
+                              
+      <div
+        class="ct-snippet__content-top"
+      >
+        Top content
+      </div>
+      
+                  
+                                          
+      <div
+        class="ct-snippet__title"
+      >
+                                      
+        <a
+          class="ct-snippet__title-link"
+          href="https://example.com/read-more"
+          target="_blank"
+        >
+          Snippet Title
+        </a>
+        
+                          
+      </div>
+      
+                  
+                              
+      <div
+        class="ct-snippet__content-middle"
+      >
+        Middle content
+      </div>
+      
+                  
+                              
+
+
+      <div
+        class="ct-paragraph ct-theme-dark ct-paragraph--regular ct-paragraph--no-margin ct-snippet__summary"
+      >
+        This is the summary of the snippet.
+      </div>
+                        
+                              
+      <div
+        class="ct-snippet__tags"
+      >
+        
+              
+
+  
+        <div
+          class="ct-tag-list ct-theme-dark  "
+        >
+          
+              
+                                                                                          
+
+  
+          <ul
+            class="ct-item-list ct-item-list--horizontal ct-item-list--small  ct-tag-list__content"
+          >
+            
+                  
+            <li
+              class="ct-item-list__item"
+            >
+                                      
+
+  
+  
+  
+    
+              <span
+                class="ct-tag ct-theme-dark ct-tag--primary    "
+              >
+                    Tag1  
+              </span>
+              
+          
+            </li>
+            
+                        
+            <li
+              class="ct-item-list__item"
+            >
+                                      
+
+  
+  
+  
+    
+              <span
+                class="ct-tag ct-theme-dark ct-tag--primary    "
+              >
+                    Tag2  
+              </span>
+              
+          
+            </li>
+            
+            
+          </ul>
+          
+          
+                
+        </div>
+        
+            
+      </div>
+      
+                  
+                              
+      <div
+        class="ct-snippet__content-bottom"
+      >
+        Bottom content
+      </div>
+      
+                        
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Snippet Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-snippet ct-theme-light "
+  >
+    
+          
+    <div
+      class="ct-snippet__content"
+    >
+      
+                          
+                                          
+      <div
+        class="ct-snippet__title"
+      >
+                                      Snippet Title
+                          
+      </div>
+      
+                  
+                          
+                              
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular ct-paragraph--no-margin ct-snippet__summary"
+      >
+        This is the summary of the snippet.
+      </div>
+                        
+                          
+                                
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;

package/components/02-molecules/snippet/snippet.scss

@@ -0,0 +1,60 @@
+//
+// CivicTheme Snippet component styles.
+//
+
+@use 'sass:map';
+
+.ct-snippet {
+  $root: &;
+
+  position: relative;
+  width: 100%;
+  display: flex;
+
+  #{$root}__content {
+    padding-top: ct-spacing(1);
+    padding-bottom: ct-spacing(1);
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ct-spacing(2);
+  }
+
+  #{$root}__title {
+    @include ct-typography('heading-4');
+  }
+
+  #{$root}__title-link {
+    @include ct-font-size-inherit();
+
+    text-decoration: underline;
+
+    &:focus-visible {
+      @include ct-outline();
+      @include ct-outline-border();
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:visited {
+      color: inherit;
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, background-color);
+
+    #{$root}__title,
+    #{$root}__title-link {
+      @include ct-component-property($root, $theme, title, color);
+    }
+
+    #{$root}__title-link {
+      &:hover {
+        @include ct-component-property($root, $theme, title, hover, color);
+      }
+    }
+  }
+}

package/components/02-molecules/snippet/snippet.stories.data.js

@@ -0,0 +1,20 @@
+export default {
+  args: (theme = 'light') => ({
+    theme,
+    title: 'Snippet name which runs across two or three lines',
+    summary: 'Summary of the snippet',
+    link: {
+      url: 'https://example.com',
+      is_new_window: false,
+    },
+    tags: [
+      'Tag 1',
+      'Tag 2',
+    ],
+    content_top: '',
+    content_middle: '',
+    content_bottom: '',
+    modifier_class: '',
+    attributes: null,
+  }),
+};

package/components/02-molecules/snippet/snippet.stories.js

@@ -0,0 +1,50 @@
+/**
+ * CivicTheme Snippet component stories.
+ */
+
+import Component from './snippet.twig';
+import SnippetData from './snippet.stories.data';
+
+const meta = {
+  title: 'Molecules/List/Snippet',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    summary: {
+      control: { type: 'text' },
+    },
+    link: {
+      control: { type: 'object' },
+    },
+    tags: {
+      control: { type: 'array' },
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content_middle: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Snippet = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: SnippetData.args('light'),
+};

package/components/02-molecules/snippet/snippet.test.js

@@ -0,0 +1,108 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/snippet/snippet.twig';
+
+describe('Snippet Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      title: 'Snippet Title',
+      summary: 'This is the summary of the snippet.',
+    });
+
+    expect(c.querySelectorAll('.ct-snippet')).toHaveLength(1);
+    expect(c.querySelector('.ct-snippet__title').textContent.trim()).toEqual('Snippet Title');
+    expect(c.querySelector('.ct-snippet__summary').textContent.trim()).toEqual('This is the summary of the snippet.');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      content_top: 'Top content',
+      title: 'Snippet Title',
+      summary: 'This is the summary of the snippet.',
+      content_middle: 'Middle content',
+      content_bottom: 'Bottom content',
+      link: {
+        text: 'Read more',
+        url: 'https://example.com/read-more',
+        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-snippet');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+
+    expect(c.querySelector('.ct-snippet__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-snippet__content-bottom').textContent.trim()).toEqual('Bottom content');
+    expect(c.querySelector('.ct-snippet__title').textContent.trim()).toContain('Snippet Title');
+    expect(c.querySelector('.ct-snippet__summary').textContent.trim()).toEqual('This is the summary of the snippet.');
+    expect(c.querySelector('.ct-snippet__content-middle').textContent.trim()).toEqual('Middle content');
+
+    const link = c.querySelector('.ct-snippet__title-link');
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toEqual('https://example.com/read-more');
+    expect(link.getAttribute('target')).toEqual('_blank');
+
+    const tags = c.querySelectorAll('.ct-snippet__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: '',
+    });
+
+    expect(c.querySelectorAll('.ct-snippet')).toHaveLength(0);
+  });
+
+  test('renders with link and tags', async () => {
+    const c = await dom(template, {
+      title: 'Snippet Title',
+      link: {
+        text: 'Read more',
+        url: 'https://example.com/read-more',
+      },
+      tags: ['Tag1', 'Tag2'],
+    });
+
+    const link = c.querySelector('.ct-snippet__title-link');
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toEqual('https://example.com/read-more');
+
+    const tags = c.querySelectorAll('.ct-snippet__tags .ct-tag');
+    expect(tags).toHaveLength(2);
+    expect(tags[0].textContent.trim()).toEqual('Tag1');
+    expect(tags[1].textContent.trim()).toEqual('Tag2');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with content slots', async () => {
+    const c = await dom(template, {
+      content_top: 'Top content',
+      title: 'Snippet Title',
+      content_middle: 'Middle content',
+      content_bottom: 'Bottom content',
+    });
+
+    expect(c.querySelector('.ct-snippet__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-snippet__content-bottom').textContent.trim()).toEqual('Bottom content');
+    expect(c.querySelector('.ct-snippet__title').textContent.trim()).toEqual('Snippet Title');
+    expect(c.querySelector('.ct-snippet__content-middle').textContent.trim()).toEqual('Middle content');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/02-molecules/snippet/snippet.twig

@@ -0,0 +1,109 @@
+{#
+/**
+ * @file
+ * CivicTheme Snippet component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - modifier_class: [string] Additional CSS classes.
+ * - link: [object] Snippet link object.
+ *   Each property contains:
+ *   - text: [string]
+ *   - url: [string]
+ *   - is_new_window: [boolean]
+ *   - is_external: [boolean]
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - content_top: Top content area.
+ * - content_middle: Middle content area.
+ * - content_bottom: Bottom content area.
+ * - title: Snippet title text.
+ * - summary: Snippet summary text.
+ * - tags: Snippet tags.
+ *
+ * Blocks:
+ * - content_block
+ * - content_top_block
+ * - title_block
+ * - content_middle_block
+ * - summary_block
+ * - content_tags_block
+ * - content_bottom_block
+ */
+#}
+
+{% set with_link = link is not empty and link.url is defined and link.url is not empty %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+{% if title is not empty %}
+  <div class="ct-snippet {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% block content_block %}
+      <div class="ct-snippet__content">
+        {% block content_top_block %}
+          {% if content_top is not empty %}
+            <div class="ct-snippet__content-top">
+              {{- content_top -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block title_block %}
+          {% if title is not empty %}
+            {% set title_content %}
+              {% if with_link %}
+                <a
+                  class="ct-snippet__title-link"
+                  href="{{ link.url }}"
+                  {% if link.is_new_window %}target="_blank"{% endif %}
+                >{{ title }}</a>
+              {% else %}
+                {{ title }}
+              {% endif %}
+            {% endset %}
+            <div class='ct-snippet__title'>{{ title_content }}</div>
+          {% endif %}
+        {% endblock %}
+
+        {% block content_middle_block %}
+          {% if content_middle is not empty %}
+            <div class="ct-snippet__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-snippet__summary',
+            } only %}
+          {% endif %}
+        {% endblock %}
+
+        {% block content_tags_block %}
+          {% if tags %}
+            <div class="ct-snippet__tags">
+              {% include '@molecules/tag-list/tag-list.twig' with {
+                theme: theme,
+                tags: tags,
+              } only %}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block content_bottom_block %}
+          {% if content_bottom is not empty %}
+            <div class="ct-snippet__content-bottom">
+              {{- content_bottom -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+      </div>
+    {% endblock %}
+  </div>
+{% endif %}