@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,106 @@
+{#
+/**
+ * @file
+ * CivicTheme Navigation component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - name: [string] Navigation name for nav element.
+ * - menu_id: [string] Optional menu ID used for grouping dropdown items.
+ * - type: [string] Navigation display type (none, inline, dropdown, drawer).
+ * - variant: [string] One of: primary, secondary.
+ * - dropdown_columns: [integer] Dropdown drawer column count.
+ * - dropdown_columns_fill: [boolean] Whether to fill columns.
+ * - is_animated: [boolean] Whether to use animation for transitions.
+ * - modifier_class: [string] Additional CSS classes.
+ * - items: [array] Menu items:
+ *   Each item contains:
+ *   - title: [string] Navigation item title.
+ *   - url: [string] URL of the menu item.
+ *   - in_active_trail: [boolean] Whether the item is in the active trail.
+ *   - is_expanded: [boolean] Whether the item is expanded.
+ *   - below: [array] Submenu items.
+ *     Each item contains:
+ *     - items [object]
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - title: Navigation title.
+ *
+ * Blocks:
+ * - title_block
+ */
+#}
+
+{% set menu_id = menu_id|default('navigation') %}
+{% set dropdown_class = 'ct-navigation--%s'|format(type|default('none')) %}
+{% set variant_class = variant ? 'ct-navigation--%s'|format(variant) : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s'|format(theme_class, dropdown_class, variant_class, modifier_class|default('')) %}
+
+{% if items is not empty %}
+  {% set menu_level_classes = {} %}
+  {% if type in ['dropdown', 'drawer'] %}
+    {% for key in items|keys %}
+      {% if items[key].below %}
+        {# Item attributes to convert them into a collapsible element. #}
+        {% set item_attributes = create_attribute({
+          'data-collapsible': '',
+          'data-collapsible-collapsed': '',
+          'data-collapsible-icon-group': '',
+          'data-collapsible-group': menu_id,
+          'data-collapsible-duration': is_animated ? '250' : '0',
+        }) %}
+
+        {% if type == 'drawer' %}
+          {# Item classes to style dynamically. #}
+          {% set item_dropdown_columns_class = dropdown_columns ? 'ct-navigation__dropdown-columns--%s'|format(dropdown_columns) : '' %}
+          {% set item_dropdown_columns_fill_class = dropdown_columns_fill ? 'ct-navigation__dropdown-columns--fill' : '' %}
+          {% set item_modifier_class = 'ct-navigation__has-dropdown %s %s'|format(item_dropdown_columns_class, item_dropdown_columns_fill_class) %}
+          {% set menu_level_classes = {1: 'container'} %}
+          {# Update item with attributes and classes. #}
+          {% set new_item = items[key]|merge({attributes: item_attributes, modifier_class: item_modifier_class}) %}
+          {% set items = items|merge({(key): new_item}) %}
+        {% else %}
+          {# Item classes to style dynamically. #}
+          {% set item_modifier_class = 'ct-navigation__has-dropdown' %}
+          {# Update item with attributes and classes. #}
+          {% set new_item = items[key]|merge({attributes: item_attributes, modifier_class: item_modifier_class}) %}
+          {% set items = items|merge({(key): new_item}) %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  {% else %}
+    {% for key in items|keys %}
+      {% if items[key].below %}
+        {% set items_without_below = items[key]|merge({below: null}) %}
+        {% set items = items|merge({(key): items_without_below}) %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+
+  <div class="ct-navigation {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% if title %}
+      {% block title_block %}
+        {% include '@atoms/heading/heading.twig' with {
+          theme: theme|default('light'),
+          level: 2,
+          content: title,
+          modifier_class: 'ct-navigation__title',
+        } only %}
+      {% endblock %}
+    {% endif %}
+
+    <nav
+      class="ct-navigation__items"
+      {% if name is not empty %}aria-label="{{ name }}"{% endif %}
+    >
+    {% include '@base/menu/menu.twig' with {
+        theme: theme|default('light'),
+        items: items,
+        modifier_class: 'ct-navigation__menu',
+        menu_level_modifier_class: menu_level_classes,
+      } only %}
+    </nav>
+  </div>
+{% endif %}

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

@@ -0,0 +1,415 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Promo Component does not render when title and content are empty 1`] = `
+<div>
+  
+
+
+
+</div>
+`;
+
+exports[`Promo Component renders with all attributes provided 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-promo ct-theme-dark ct-promo--with-background ct-vertical-spacing--both additional-class"
+    data-test="true"
+  >
+    
+        
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+                                              
+          <div
+            class="ct-promo__content-top"
+          >
+            
+                Top Content
+              
+          </div>
+          
+                      
+                      
+          <div
+            class="ct-promo__wrapper"
+          >
+            
+                              
+            <div
+              class="ct-promo__inner"
+            >
+              
+                                      
+
+
+  
+              <h4
+                class="ct-heading ct-theme-dark ct-promo__title"
+              >
+                Promo Title
+              </h4>
+              
+                  
+                                      
+
+
+              <div
+                class="ct-paragraph ct-theme-dark ct-paragraph--regular  ct-promo__content"
+              >
+                Promo content text.
+              </div>
+                                                
+            </div>
+            
+              
+                                                
+            <div
+              class="ct-promo__links"
+            >
+              
+                    
+
+  
+              <a
+                class="ct-button ct-theme-dark ct-button--secondary ct-button--link ct-button--large  ct-button--external ct-promo__button"
+                data-component-name="button"
+                href="https://example.com"
+                role="button"
+                target="_blank"
+              >
+                
+      
+                <span
+                  class="ct-text-icon__text"
+                >
+                  Learn 
+                </span>
+                <span
+                  class="ct-text-icon__group"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    More
+                  </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>
+              
+                  
+            </div>
+            
+                                          
+          </div>
+          
+          
+                                    
+          <div
+            class="ct-promo__content-bottom"
+          >
+            
+                Bottom Content
+              
+          </div>
+          
+                                        
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Promo Component renders with only required attributes 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-promo ct-theme-light   "
+  >
+    
+        
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+                                          
+                      
+          <div
+            class="ct-promo__wrapper"
+          >
+            
+                              
+            <div
+              class="ct-promo__inner"
+            >
+              
+                                      
+
+
+  
+              <h4
+                class="ct-heading ct-theme-light ct-promo__title"
+              >
+                Promo Title
+              </h4>
+              
+                  
+                                      
+
+
+              <div
+                class="ct-paragraph ct-theme-light ct-paragraph--regular  ct-promo__content"
+              >
+                Promo content text.
+              </div>
+                                                
+            </div>
+            
+              
+                                                        
+          </div>
+          
+          
+                                                  
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Promo Component renders without content_bottom and link 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-promo ct-theme-light   "
+  >
+    
+        
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+                                              
+          <div
+            class="ct-promo__content-top"
+          >
+            
+                Top Content
+              
+          </div>
+          
+                      
+                      
+          <div
+            class="ct-promo__wrapper"
+          >
+            
+                              
+            <div
+              class="ct-promo__inner"
+            >
+              
+                                      
+
+
+  
+              <h4
+                class="ct-heading ct-theme-light ct-promo__title"
+              >
+                Promo Title
+              </h4>
+              
+                  
+                                      
+
+
+              <div
+                class="ct-paragraph ct-theme-light ct-paragraph--regular  ct-promo__content"
+              >
+                Promo content text.
+              </div>
+                                                
+            </div>
+            
+              
+                                                        
+          </div>
+          
+          
+                                                  
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Promo Component renders without content_top and content_bottom 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-promo ct-theme-light   "
+  >
+    
+                                    
+                      
+    <div
+      class="ct-promo__wrapper"
+    >
+      
+                              
+      <div
+        class="ct-promo__inner"
+      >
+        
+                                      
+
+
+  
+        <h4
+          class="ct-heading ct-theme-light ct-promo__title"
+        >
+          Promo Title
+        </h4>
+        
+                  
+                                      
+
+
+        <div
+          class="ct-paragraph ct-theme-light ct-paragraph--regular  ct-promo__content"
+        >
+          Promo content text.
+        </div>
+                                          
+      </div>
+      
+              
+                                                
+      <div
+        class="ct-promo__links"
+      >
+        
+                    
+
+  
+        <a
+          class="ct-button ct-theme-light ct-button--secondary ct-button--link ct-button--large   ct-promo__button"
+          data-component-name="button"
+          href="https://example.com"
+          role="button"
+        >
+          <span
+            class="ct-text-icon__text"
+          >
+            Learn More
+          </span>
+        </a>
+        
+                  
+      </div>
+      
+                                          
+    </div>
+    
+          
+                                            
+  </div>
+  
+
+</div>
+`;

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

@@ -0,0 +1,65 @@
+//
+// CivicTheme Promo component styles.
+//
+
+.ct-promo {
+  $root: &;
+
+  &#{$root}--with-background {
+    @include ct-breakpoint(m) {
+      padding-left: var(--ct-promo-space-horizontal);
+      padding-right: var(--ct-promo-space-horizontal);
+    }
+  }
+
+  & {
+    border-top: solid ct-particle(0.125);
+    border-bottom: solid ct-particle(0.125);
+  }
+
+  &__wrapper {
+    padding: ct-spacing(3) 0;
+
+    @include ct-breakpoint(m) {
+      padding: ct-spacing(7) 0;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__inner {
+    @include ct-breakpoint(m) {
+      flex-grow: 1;
+      padding-right: ct-spacing(5);
+    }
+  }
+
+  &__links {
+    margin-top: ct-spacing(3);
+
+    @include ct-breakpoint(m) {
+      margin-top: 0;
+    }
+  }
+
+  &__title {
+    margin-bottom: ct-spacing(1);
+  }
+
+  &__content {
+    margin-left: auto;
+  }
+
+  &__button {
+    width: auto;
+
+    @include ct-breakpoint(m) {
+      white-space: nowrap;
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, background-color);
+    @include ct-component-property($root, $theme, border-color);
+  }
+}

package/components/03-organisms/promo/promo.stories.js

@@ -0,0 +1,70 @@
+/**
+ * CivicTheme Promo component stories.
+ */
+
+import Component from './promo.twig';
+
+const meta = {
+  title: 'Organisms/Promo',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    is_contained: {
+      control: { type: 'boolean' },
+    },
+    link: {
+      control: { type: 'object' },
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    with_background: {
+      control: { type: 'boolean' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Promo = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    theme: 'light',
+    title: 'Sign up for industry news and updates from CivicTheme',
+    is_contained: true,
+    link: {
+      text: 'Sign up',
+      url: 'https://example.com',
+      is_new_window: true,
+      is_external: true,
+    },
+    with_background: false,
+    vertical_spacing: 'none',
+    content_top: '',
+    content: 'Officia officia deserunt sint sint magna esse in ut elit aliquip nostrud laboris.',
+    content_bottom: '',
+    attributes: null,
+    modifier_class: '',
+  },
+};