@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * CivicTheme Tabs component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - vertical_spacing: [string] Vertical spacing for the tabs (none, top, bottom, both).
+ * - modifier_class: [string] Additional CSS classes.
+ * - panels: [array] Tab panels:
+ *   Each item contains:
+ *   - title: [string] Panel title.
+ *   - content: [string] Panel content.
+ *   - id: [string] Panel ID.
+ *   - is_selected: [boolean] Whether the panel is selected.
+ * - links: [array] Optional links (if not provided - will be generated from panels):
+ *   Each item contains:
+ *   - text: [string] Link text.
+ *   - url: [string] Link URL.
+ *   - modifier_class: [string] Additional CSS classes.
+ *   - attributes: [object] Additional HTML attributes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing--%s'|format(vertical_spacing) : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %}
+
+{# Create links from panels if not provided. #}
+{% if links is empty and panels is not empty %}
+  {% set links = [] %}
+  {% for k, panel in panels %}
+    {% set link_id = panel.id ~ '-tab' %}
+    {% set links = links|merge([{
+      text: panel.title,
+      url: '#' ~ link_id,
+      attributes: create_attribute({role: 'tab', id: link_id, 'aria-controls': panel.id}),
+      link_id: link_id,
+    }]) %}
+  {% endfor %}
+{% endif %}
+
+{% set link_items = [] %}
+{% for k, link in links %}
+  {%- set link %}
+    {% set link_attributes = link.attributes is defined and link.attributes is not null ? link.attributes : create_attribute({}) %}
+    {% include '@atoms/link/link.twig' with {
+      theme: theme,
+      text: link.text,
+      url: link.url,
+      is_new_window: link.is_new_window is defined ? link.is_new_window : false,
+      is_external: link.is_external is defined ? link.is_external : false,
+      modifier_class: link.modifier_class ? link.modifier_class : '',
+      attributes: link_attributes.setAttribute('data-tabs-tab', ''),
+    } only %}
+  {% endset -%}
+  {% set link_items = link_items|merge([link]) %}
+{% endfor %}
+
+{% if panels is not empty or link_items is not empty %}
+  <div class="ct-tabs {{ modifier_class -}}" data-tabs-panel {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% include '@base/item-list/item-list.twig' with {
+      items: link_items,
+      no_gap: true,
+      modifier_class: 'ct-tabs__links',
+    } only %}
+
+    {% if panels is not empty %}
+      <div class="ct-tabs__panels">
+        {% for k, panel in panels %}
+          {% if panel.content is not empty %}
+            <div class="ct-tabs__panels__panel {% if panel.is_selected %}selected{% endif %}" data-tabs-panel id="{{ panel.id }}" role="tabpanel" aria-labelledby="{{ links[k].link_id }}">
+              {{ panel.content }}
+            </div>
+          {% endif %}
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

package/components/02-molecules/tag-list/__snapshots__/tag-list.test.js.snap

@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag List Component does not render when tags are empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Tag List Component renders with content slots 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-tag-list ct-theme-light  "
+  >
+    
+                  
+    <div
+      class="ct-tag-list__content-top"
+    >
+      Top content
+    </div>
+    
+          
+                                                                                          
+
+  
+    <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    "
+        >
+              Tag 1  
+        </span>
+        
+          
+      </li>
+      
+                        
+      <li
+        class="ct-item-list__item"
+      >
+                                
+
+  
+  
+  
+    
+        <span
+          class="ct-tag ct-theme-light ct-tag--primary    "
+        >
+              Tag 2  
+        </span>
+        
+          
+      </li>
+      
+            
+    </ul>
+    
+          
+                  
+    <div
+      class="ct-tag-list__content-bottom"
+    >
+      Bottom content
+    </div>
+    
+            
+  </div>
+  
+
+</div>
+`;
+
+exports[`Tag List Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-tag-list ct-theme-dark ct-vertical-spacing--both custom-class"
+    data-test="true"
+  >
+    
+                  
+    <div
+      class="ct-tag-list__content-top"
+    >
+      Top content
+    </div>
+    
+          
+                                                                                          
+
+  
+    <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    "
+        >
+              Tag 1  
+        </span>
+        
+          
+      </li>
+      
+                        
+      <li
+        class="ct-item-list__item"
+      >
+                                
+
+  
+  
+  
+    
+        <span
+          class="ct-tag ct-theme-dark ct-tag--primary    "
+        >
+              Tag 2  
+        </span>
+        
+          
+      </li>
+      
+            
+    </ul>
+    
+          
+                  
+    <div
+      class="ct-tag-list__content-bottom"
+    >
+      Bottom content
+    </div>
+    
+            
+  </div>
+  
+
+</div>
+`;
+
+exports[`Tag List Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <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    "
+        >
+              Tag 1  
+        </span>
+        
+          
+      </li>
+      
+                        
+      <li
+        class="ct-item-list__item"
+      >
+                                
+
+  
+  
+  
+    
+        <span
+          class="ct-tag ct-theme-light ct-tag--primary    "
+        >
+              Tag 2  
+        </span>
+        
+          
+      </li>
+      
+                        
+      <li
+        class="ct-item-list__item"
+      >
+                                
+
+  
+  
+  
+    
+        <span
+          class="ct-tag ct-theme-light ct-tag--primary    "
+        >
+              Tag 3  
+        </span>
+        
+          
+      </li>
+      
+            
+    </ul>
+    
+          
+                
+  </div>
+  
+
+</div>
+`;

package/components/02-molecules/tag-list/tag-list.stories.js

@@ -0,0 +1,53 @@
+/**
+ * CivicTheme Tag List component stories.
+ */
+
+import Component from './tag-list.twig';
+
+const meta = {
+  title: 'Molecules/Tag List',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    tags: {
+      control: { type: 'array' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const TagList = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    tags: [
+      'Tag 1',
+      'Tag 2',
+      { theme: 'dark', url: 'http://www.google.com', content: 'Tag 3', type: 'primary', icon: 'right-arrow-2' },
+    ],
+    vertical_spacing: 'none',
+    content_top: '',
+    content_bottom: '',
+    modifier_class: '',
+    attributes: null,
+  },
+};

package/components/02-molecules/tag-list/tag-list.test.js

@@ -0,0 +1,64 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/tag-list/tag-list.twig';
+
+describe('Tag List Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      tags: ['Tag 1', 'Tag 2', 'Tag 3'],
+    });
+
+    expect(c.querySelectorAll('.ct-tag-list')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-tag-list__content .ct-tag')).toHaveLength(3);
+    expect(c.querySelectorAll('.ct-tag-list__content .ct-tag')[0].textContent.trim()).toEqual('Tag 1');
+    expect(c.querySelectorAll('.ct-tag-list__content .ct-tag')[1].textContent.trim()).toEqual('Tag 2');
+    expect(c.querySelectorAll('.ct-tag-list__content .ct-tag')[2].textContent.trim()).toEqual('Tag 3');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      tags: ['Tag 1', 'Tag 2'],
+      theme: 'dark',
+      vertical_spacing: 'both',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      content_top: 'Top content',
+      content_bottom: 'Bottom content',
+    });
+
+    const element = c.querySelector('.ct-tag-list');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('ct-vertical-spacing--both')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+
+    expect(c.querySelector('.ct-tag-list__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-tag-list__content-bottom').textContent.trim()).toEqual('Bottom content');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when tags are empty', async () => {
+    const c = await dom(template, {
+      tags: [],
+    });
+
+    expect(c.querySelectorAll('.ct-tag-list')).toHaveLength(0);
+  });
+
+  test('renders with content slots', async () => {
+    const c = await dom(template, {
+      tags: ['Tag 1', 'Tag 2'],
+      content_top: 'Top content',
+      content_bottom: 'Bottom content',
+    });
+
+    expect(c.querySelector('.ct-tag-list__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-tag-list__content-bottom').textContent.trim()).toEqual('Bottom content');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/02-molecules/tag-list/tag-list.twig

@@ -0,0 +1,68 @@
+{#
+/**
+ * @file
+ * CivicTheme Tag List component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - vertical_spacing: [string] Tag list vertical spacing (none, top, bottom, both).
+ * - modifier_class: [string] Additional CSS classes.
+ * - tags: [array] Tags:
+ *   Each item contains:
+ *   - content: [string] Tag content.
+ *   - 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:
+ * - content_top: Top content area.
+ * - content_bottom: Bottom content area.
+ *
+ * Blocks:
+ * - content_top_block
+ * - content_block
+ * - content_bottom_block
+ */
+#}
+
+{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing--%s'|format(vertical_spacing) : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %}
+
+{% if tags is not empty %}
+  <div class="ct-tag-list {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% block content_top_block %}
+      {% if content_top is not empty %}
+        <div class="ct-tag-list__content-top">
+          {{- content_top -}}
+        </div>
+      {% endif %}
+    {% endblock %}
+
+    {% block content_block %}
+      {% if tags %}
+        {% set tag_items = [] %}
+        {% for tag in tags %}
+          {% set tag_item %}
+            {% set tag_data = tag is iterable ? {theme: theme}|merge(tag) : {theme: theme, content: tag} %}
+            {% include '@atoms/tag/tag.twig' with tag_data only %}
+          {% endset %}
+          {% set tag_items = tag_items|merge([tag_item]) %}
+        {% endfor %}
+        {% include '@base/item-list/item-list.twig' with {
+          items: tag_items,
+          size: 'small',
+          modifier_class: 'ct-tag-list__content',
+        } only %}
+      {% endif %}
+    {% endblock %}
+
+    {% block content_bottom_block %}
+      {% if content_bottom is not empty %}
+        <div class="ct-tag-list__content-bottom">
+          {{- content_bottom -}}
+        </div>
+      {% endif %}
+    {% endblock %}
+  </div>
+{% endif %}