@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,489 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Campaign Component renders with attributes 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-campaign ct-theme-dark ct-vertical-spacing-inset--both ct-campaign--image-left custom-class"
+    data-test="true"
+  >
+    
+  
+    <div
+      class="container"
+    >
+      
+    
+      <div
+        class="row row--vertically-spaced"
+      >
+        
+      
+        <div
+          class="col-xxs-12 col-m-5 col-m-offset-1 ct-flex-align-self-center"
+        >
+          
+        
+          <div
+            class="ct-campaign__inner"
+          >
+            
+                                    
+            <div
+              class="ct-campaign__content-top"
+            >
+              
+                Top content
+              
+            </div>
+            
+                      
+                                    
+
+  
+            <div
+              class="ct-tag-list ct-theme-dark  ct-campaign__tags"
+            >
+              
+              
+                                                                                          
+
+  
+              <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>
+            
+                      
+                                    
+
+
+  
+            <h2
+              class="ct-heading ct-theme-dark ct-campaign__title"
+            >
+              Campaign Title
+            </h2>
+            
+            
+                          
+
+  
+  
+  
+    
+            <span
+              class="ct-tag ct-theme-dark ct-tag--tertiary    ct-campaign__date"
+            >
+                  2024-06-19  
+            </span>
+            
+            
+                          
+
+
+            <div
+              class="ct-paragraph ct-theme-dark ct-paragraph--regular  ct-campaign__content"
+            >
+              This is the main content of the campaign.
+            </div>
+                        
+                                                                                                                                                                  
+                
+
+  
+            <ul
+              class="ct-item-list ct-item-list--horizontal ct-item-list--regular  ct-campaign__links ct-item-list--horizontal-middle"
+            >
+              
+                  
+              <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="http://example.com/1"
+                  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--tertiary ct-button--link ct-button--regular   "
+                  data-component-name="button"
+                  href="http://example.com/2"
+                  role="button"
+                >
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Link 2
+                  </span>
+                </a>
+                
+                  
+              </li>
+              
+            
+            </ul>
+            
+                                    
+                                    
+            <div
+              class="ct-campaign__content-bottom"
+            >
+              
+                Bottom content
+              
+            </div>
+            
+                              
+          </div>
+          
+      
+        </div>
+        
+      
+        <div
+          class="col-xxs-12 first col-m-5 first-m ct-flex-align-self-start"
+        >
+          
+                              
+          <div
+            class="ct-campaign__image"
+          >
+            
+              
+
+
+  
+            <img
+              alt="Example Image"
+              class="ct-image ct-theme-dark "
+              src="http://example.com/image.jpg"
+            />
+            
+            
+          </div>
+          
+                        
+        </div>
+        
+    
+      </div>
+      
+  
+    </div>
+    
+
+  </div>
+  
+
+</div>
+`;
+
+exports[`Campaign Component renders with image position right 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-campaign ct-theme-light  ct-campaign--image-right "
+  >
+    
+  
+    <div
+      class="container"
+    >
+      
+    
+      <div
+        class="row row--vertically-spaced"
+      >
+        
+      
+        <div
+          class="col-xxs-12 col-m-5 col-m-offset-1 ct-flex-align-self-center"
+        >
+          
+        
+          <div
+            class="ct-campaign__inner"
+          >
+            
+                                
+                                
+                      
+            
+            
+                                                
+                                        
+          </div>
+          
+      
+        </div>
+        
+      
+        <div
+          class="col-xxs-12 first col-m-5 col-m-offset-1 last-m ct-flex-align-self-start"
+        >
+          
+                              
+          <div
+            class="ct-campaign__image"
+          >
+            
+              
+
+
+  
+            <img
+              alt="Example Image"
+              class="ct-image ct-theme-light "
+              src="http://example.com/image.jpg"
+            />
+            
+            
+          </div>
+          
+                        
+        </div>
+        
+    
+      </div>
+      
+  
+    </div>
+    
+
+  </div>
+  
+
+</div>
+`;
+
+exports[`Campaign Component renders with tags 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-campaign ct-theme-light  ct-campaign--image-right "
+  >
+    
+  
+    <div
+      class="container"
+    >
+      
+    
+      <div
+        class="row row--vertically-spaced"
+      >
+        
+      
+        <div
+          class="col-xxs-12 col-m-5 col-m-offset-1 ct-flex-align-self-center"
+        >
+          
+        
+          <div
+            class="ct-campaign__inner"
+          >
+            
+                                
+                                    
+
+  
+            <div
+              class="ct-tag-list ct-theme-light  ct-campaign__tags"
+            >
+              
+              
+                                                                                          
+
+  
+              <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
+          class="col-xxs-12 first col-m-5 col-m-offset-1 last-m ct-flex-align-self-start"
+        >
+          
+                                
+        </div>
+        
+    
+      </div>
+      
+  
+    </div>
+    
+
+  </div>
+  
+
+</div>
+`;

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

@@ -0,0 +1,64 @@
+//
+// CivicTheme Campaign component styles.
+//
+
+@use 'sass:map';
+
+.ct-campaign {
+  $root: &;
+
+  #{$root}__image {
+    @include ct-image-fit();
+
+    height: var(--ct-campaign-mobile-height);
+
+    img {
+      border-radius: var(--ct-campaign-image-border-radius);
+    }
+
+    @include ct-breakpoint(m) {
+      @include ct-image-container-square();
+    }
+  }
+
+  #{$root}__inner {
+    > * {
+      margin-bottom: ct-spacing(2);
+
+      @include ct-breakpoint(m) {
+        margin-bottom: ct-spacing(3);
+      }
+
+      @include ct-breakpoint(xl) {
+        margin-bottom: ct-spacing(4);
+      }
+    }
+  }
+
+  #{$root}__links {
+    > * {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, background-color);
+
+    &.ct-campaign--image-left {
+      .ct-campaign__image {
+        @include ct-breakpoint(m) {
+          @include ct-image-shadow(ct-component-var($root, $theme, image, shadow-color), 'down-right', var(--ct-campaign-image-shadow-offset-x), var(--ct-campaign-image-shadow-offset-y));
+        }
+      }
+    }
+
+    &.ct-campaign--image-right {
+      .ct-campaign__image {
+        @include ct-breakpoint(m) {
+          @include ct-image-shadow(ct-component-var($root, $theme, image, shadow-color), 'down-left', var(--ct-campaign-image-shadow-offset-x), var(--ct-campaign-image-shadow-offset-y));
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+/**
+ * CivicTheme Campaign component stories.
+ */
+
+import Component from './campaign.twig';
+
+const meta = {
+  title: 'Organisms/Campaign',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    image: {
+      control: { type: 'object' },
+    },
+    image_position: {
+      control: { type: 'radio' },
+      options: ['left', 'right'],
+    },
+    tags: {
+      control: { type: 'array' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    date: {
+      control: { type: 'text' },
+    },
+    links: {
+      control: { type: 'array' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['top', 'bottom', 'both'],
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Campaign = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    theme: 'light',
+    title: 'Campaign heading which runs across two or three lines',
+    content: 'Quis non in nostrud incididunt voluptate ea enim cillum ex ut reprehenderit proident enim officia velit.',
+    date: '11 Dec 2024',
+    image: {
+      url: './demo/images/demo4.jpg',
+      alt: 'Image alt text',
+    },
+    image_position: 'left',
+    tags: [
+      'Tag 1',
+    ],
+    links: [
+      {
+        text: 'Link 1',
+        url: 'https://example.com/link',
+        is_new_window: false,
+        is_external: false,
+      },
+      {
+        text: 'Link 2',
+        url: 'https://example.com/link-2',
+        is_new_window: false,
+        is_external: false,
+      },
+    ],
+    vertical_spacing: 'both',
+    content_top: '',
+    content_bottom: '',
+    attributes: null,
+    modifier_class: '',
+  },
+};