@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,82 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/breadcrumb/breadcrumb.twig';
+
+describe('Breadcrumb Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      links: [
+        { text: 'Home', url: '/' },
+        { text: 'Category', url: '/category' },
+        { text: 'Subcategory', url: '/category/subcategory' },
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-breadcrumb')).toHaveLength(1);
+    expect(c.querySelector('.ct-breadcrumb__links__link--active').textContent.trim()).toEqual('Subcategory');
+
+    const links = c.querySelectorAll('.ct-breadcrumb__links__link');
+    expect(links).toHaveLength(4);
+
+    // Mobile.
+    expect(links[0].textContent.trim()).toEqual('Category');
+
+    // Desktop.
+    expect(links[1].textContent.trim()).toEqual('Home');
+    expect(links[2].textContent.trim()).toEqual('Category');
+    expect(links[3].textContent.trim()).toEqual('Subcategory');
+
+    const separators = c.querySelectorAll('.ct-breadcrumb__links__separator');
+    expect(separators).toHaveLength(2);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      links: [
+        { text: 'Home', url: '/' },
+        { text: 'Category', url: '/category' },
+        { text: 'Subcategory', url: '/category/subcategory' },
+      ],
+      theme: 'dark',
+      active_is_link: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    expect(c.querySelectorAll('.ct-breadcrumb.custom-class.ct-theme-dark')).toHaveLength(1);
+    expect(c.querySelector('.ct-breadcrumb').getAttribute('data-test')).toEqual('true');
+
+    const activeLink = c.querySelector('.ct-breadcrumb__links__link--active');
+    expect(activeLink.tagName).toEqual('A');
+    expect(activeLink.getAttribute('href')).toEqual('/category/subcategory');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders without links', async () => {
+    const c = await dom(template, {
+      links: [],
+    });
+
+    expect(c.querySelectorAll('.ct-breadcrumb')).toHaveLength(0);
+  });
+
+  test('renders active element as span when active_is_link is false', async () => {
+    const c = await dom(template, {
+      links: [
+        { text: 'Home', url: '/' },
+        { text: 'Category', url: '/category' },
+        { text: 'Subcategory', url: '/category/subcategory' },
+      ],
+      active_is_link: false,
+    });
+
+    const activeElement = c.querySelector('.ct-breadcrumb__links__link--active');
+    expect(activeElement.tagName).toEqual('SPAN');
+    expect(activeElement.getAttribute('aria-current')).toEqual('location');
+
+    assertUniqueCssClasses(c);
+  });
+});

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

@@ -0,0 +1,85 @@
+{#
+/**
+ * @file
+ * CivicTheme Breadcrumb component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - active_is_link: [boolean] Whether to show the active element as a link.
+ * - modifier_class: [string] Additional CSS classes.
+ * - links: [array] Breadcrumb links:
+ *   Each item contains:
+ *   - text: [string] Link text.
+ *   - url: [string] Link URL.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+{% if links %}
+  {% set links_count = links|length %}
+  {% set parent = false %}
+
+  <nav class="ct-breadcrumb {{ modifier_class -}}" aria-label="breadcrumb" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% set link_items = [] %}
+
+    {% for link in links %}
+      {% set link_item -%}
+        {% set link_data = {
+          text: link.text,
+          url: link.url,
+          theme: theme,
+          is_active: (loop.index == links_count),
+          attributes: (loop.index == links_count) ? create_attribute({'aria-current': 'location'}) : null,
+          modifier_class: (loop.index == links_count) ? 'ct-breadcrumb__links__link ct-breadcrumb__links__link--active' : 'ct-breadcrumb__links__link',
+        } %}
+
+        {%- if (not active_is_link or link_data.url is empty) and (loop.index == links_count) -%}
+          <span class="ct-breadcrumb__links__link ct-breadcrumb__links__link--active" aria-current="location">{{ link_data.text }}</span>
+        {%- else -%}
+          {%- include '@atoms/link/link.twig' with link_data only -%}
+          {%- if loop.index < links_count -%}
+            {%- include '@base/icon/icon.twig' with {
+              symbol: 'right-arrow-1',
+              modifier_class: 'ct-breadcrumb__links__separator',
+            } only -%}
+          {% endif -%}
+        {% endif %}
+      {%- endset %}
+
+      {% set link_items = link_items|merge([link_item]) %}
+
+      {% if loop.index == links_count - 1 %}
+        {% set parent = {
+          text: link.text,
+          url: link.url,
+          theme: theme,
+          icon: 'left-arrow',
+          icon_placement: 'before',
+          modifier_class: 'ct-breadcrumb__links__link',
+        } %}
+      {% endif %}
+    {% endfor %}
+
+    {% if parent %}
+      {% set parent_link_item %}
+        {% include '@atoms/link/link.twig' with parent only %}
+      {% endset %}
+
+      {% include '@base/item-list/item-list.twig' with {
+        direction: 'horizontal',
+        items: [parent_link_item],
+        modifier_class: 'ct-breadcrumb__links show-xxs-flex hide-m',
+      } only %}
+    {% endif %}
+
+    {% include '@base/item-list/item-list.twig' with {
+      direction: 'horizontal',
+      items: link_items,
+      no_gap: true,
+      modifier_class: 'ct-breadcrumb__links hide-xxs show-m-flex',
+    } only %}
+  </nav>
+{% endif %}

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

@@ -0,0 +1,384 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Callout Component renders with multiple links 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-callout ct-theme-light  "
+  >
+    
+  
+    <div
+      class="container"
+    >
+      
+    
+      <div
+        class="row"
+      >
+        
+      
+        <div
+          class="col-xxs-12"
+        >
+          
+        
+          <div
+            class="ct-callout__wrapper"
+          >
+                                  
+                                                                                            
+            
+
+  
+            <ul
+              class="ct-item-list ct-item-list--horizontal ct-item-list--small  ct-callout__links"
+            >
+              
+                  
+              <li
+                class="ct-item-list__item"
+              >
+                                
+
+  
+                <a
+                  class="ct-button ct-theme-light ct-button--primary ct-button--link ct-button--regular   "
+                  data-component-name="button"
+                  href="https://example.com"
+                  role="button"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Link 1
+                  </span>
+                </a>
+                
+              
+              </li>
+              
+                        
+              <li
+                class="ct-item-list__item"
+              >
+                                
+
+  
+                <a
+                  class="ct-button ct-theme-light ct-button--secondary ct-button--link ct-button--regular   "
+                  data-component-name="button"
+                  href="https://example.com"
+                  role="button"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Link 2
+                  </span>
+                </a>
+                
+              
+              </li>
+              
+                        
+              <li
+                class="ct-item-list__item"
+              >
+                                
+
+  
+                <a
+                  class="ct-button ct-theme-light ct-button--secondary ct-button--link ct-button--regular   "
+                  data-component-name="button"
+                  href="https://example.com"
+                  role="button"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Link 3
+                  </span>
+                </a>
+                
+              
+              </li>
+              
+            
+            </ul>
+            
+                                        
+          </div>
+          
+      
+        </div>
+        
+    
+      </div>
+      
+  
+    </div>
+    
+
+  </div>
+  
+
+</div>
+`;
+
+exports[`Callout Component renders with optional attributes 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-callout ct-theme-dark ct-vertical-spacing-inset--both custom-class"
+    data-test="true"
+  >
+    
+  
+    <div
+      class="container"
+    >
+      
+    
+      <div
+        class="row"
+      >
+        
+      
+        <div
+          class="col-xxs-12"
+        >
+          
+        
+          <div
+            class="ct-callout__wrapper"
+          >
+                                      
+            <div
+              class="ct-callout__content-top"
+            >
+              Top content
+            </div>
+            
+                      
+                                    
+            <div
+              class="ct-callout__inner"
+            >
+              
+                                  
+
+
+  
+              <h4
+                class="ct-heading ct-theme-dark ct-callout__title"
+              >
+                Callout Title
+              </h4>
+              
+                
+                                  
+
+
+              <div
+                class="ct-paragraph ct-theme-dark ct-paragraph--regular ct-paragraph--no-margin ct-callout__content"
+              >
+                This is the main content of the callout.
+              </div>
+                                            
+            </div>
+            
+                                                                      
+            
+
+  
+            <ul
+              class="ct-item-list ct-item-list--horizontal ct-item-list--small  ct-callout__links"
+            >
+              
+                  
+              <li
+                class="ct-item-list__item"
+              >
+                                
+
+  
+                <a
+                  class="ct-button ct-theme-dark ct-button--primary ct-button--link ct-button--regular  ct-button--external "
+                  data-component-name="button"
+                  href="https://example.com"
+                  role="button"
+                  target="_blank"
+                >
+                  
+      
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Link 
+                  </span>
+                  <span
+                    class="ct-text-icon__group"
+                  >
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      1
+                    </span>
+                     
+                    <svg
+                      aria-hidden="true"
+                      class="ct-icon"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      
+
+                      <path
+                        d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z"
+                      />
+                      
+
+                    </svg>
+                    
+
+                  </span>
+                  <span
+                    class="ct-visually-hidden"
+                  >
+                    (Opens in a new tab/window)
+                  </span>
+                </a>
+                
+              
+              </li>
+              
+                        
+              <li
+                class="ct-item-list__item"
+              >
+                                
+
+  
+                <a
+                  class="ct-button ct-theme-dark ct-button--secondary ct-button--link ct-button--regular   "
+                  data-component-name="button"
+                  href="https://example.com"
+                  role="button"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Link 2
+                  </span>
+                </a>
+                
+              
+              </li>
+              
+            
+            </ul>
+            
+                                    
+            <div
+              class="ct-callout__content-bottom"
+            >
+              Bottom content
+            </div>
+            
+                              
+          </div>
+          
+      
+        </div>
+        
+    
+      </div>
+      
+  
+    </div>
+    
+
+  </div>
+  
+
+</div>
+`;
+
+exports[`Callout Component renders with required attributes 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-callout ct-theme-light  "
+  >
+    
+  
+    <div
+      class="container"
+    >
+      
+    
+      <div
+        class="row"
+      >
+        
+      
+        <div
+          class="col-xxs-12"
+        >
+          
+        
+          <div
+            class="ct-callout__wrapper"
+          >
+                                  
+                                    
+            <div
+              class="ct-callout__inner"
+            >
+              
+                
+                                  
+
+
+              <div
+                class="ct-paragraph ct-theme-light ct-paragraph--regular ct-paragraph--no-margin ct-callout__content"
+              >
+                This is the main content of the callout.
+              </div>
+                                            
+            </div>
+            
+                                              
+            
+
+                                        
+          </div>
+          
+      
+        </div>
+        
+    
+      </div>
+      
+  
+    </div>
+    
+
+  </div>
+  
+
+</div>
+`;

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

@@ -0,0 +1,35 @@
+//
+// CivicTheme Callout component styles.
+//
+
+.ct-callout {
+  $root: &;
+
+  &__wrapper {
+    border-radius: var(--ct-callout-border-radius);
+    padding: ct-spacing(3) ct-spacing(3);
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: ct-spacing(2);
+
+    @include ct-breakpoint(m) {
+      padding: ct-spacing(3) ct-spacing(5) ct-spacing(4) ct-spacing(3);
+    }
+
+    @include ct-highlight-stripe-vertical(var(--ct-callout-stripe-width), var(--ct-callout-border-radius), 0);
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: ct-spacing(2);
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    #{$root}__wrapper {
+      @include ct-component-property($root, $theme, background-color);
+      @include ct-highlight-stripe-background-color(ct-component-var($root, $theme, stripe, background-color));
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+/**
+ * CivicTheme Callout component stories.
+ */
+
+import Components from './callout.twig';
+
+const meta = {
+  title: 'Molecules/Callout',
+  component: Components,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    links: {
+      control: { type: 'array' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Callout = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    links: [
+      {
+        text: 'Link 1',
+        url: 'https://example.com/link1',
+        is_new_window: false,
+        is_external: false,
+      },
+      {
+        text: 'Link 2',
+        url: 'https://example.com/link2',
+        is_new_window: true,
+        is_external: true,
+      },
+    ],
+    content_top: '',
+    content_bottom: '',
+    title: 'Callout title from knob',
+    content: 'Example content ut fugiat ex nulla enim ipsum proident aliqua in elit irure tempor elit nisi nisi enim labore nostrud mollit ut magna commodo',
+    vertical_spacing: 'none',
+    modifier_class: '',
+    attributes: null,
+  },
+};