@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,638 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider Component does not render when slides are empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Slider Component renders with all attributes provided 1`] = `
+<div>
+  
+
+  
+  <div
+    aria-label="Slider Title"
+    aria-roledescription="carousel"
+    class="ct-slider ct-theme-dark ct-slider--with-background ct-vertical-spacing-inset--both additional-class"
+    data-test="true"
+    role="region"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+                                    
+          <div
+            class="ct-slider__content__top"
+          >
+            Top Content
+          </div>
+          
+                      
+          
+          <div
+            class="ct-slider__container"
+            data-slider=""
+          >
+            
+                                          
+
+
+  
+            <h2
+              class="ct-heading ct-theme-dark ct-slider__title"
+            >
+              Slider Title
+            </h2>
+            
+                          
+                          
+            <div
+              class="ct-slider__slides"
+              data-slider-panel=""
+            >
+              
+                
+              <div
+                class="ct-slider__slides__inner"
+                data-slider-rail=""
+              >
+                <div
+                  class="slide"
+                >
+                  Slide 1
+                </div>
+                <div
+                  class="slide"
+                >
+                  Slide 2
+                </div>
+              </div>
+              
+              
+            </div>
+            
+            
+                          
+            <div
+              class="ct-slider__controls"
+            >
+              
+                
+              <div
+                class="ct-slider__controls__inner"
+              >
+                
+                  
+
+  
+                <button
+                  _keys="data-slider-previous"
+                  class="ct-button ct-theme-dark ct-button--secondary ct-button--button ct-button--regular   ct-slider__controls__previous"
+                  data-component-name="button"
+                  data-slider-previous=""
+                >
+                  
+      
+                  <svg
+                    aria-hidden="true"
+                    class="ct-icon ct-button__icon"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    
+
+                    <path
+                      d="M16.9999 11H9.4099L12.7099 7.71C12.8982 7.52169 13.004 7.2663 13.004 7C13.004 6.7337 12.8982 6.4783 12.7099 6.29C12.5216 6.10169 12.2662 5.99591 11.9999 5.99591C11.7336 5.99591 11.4782 6.10169 11.2899 6.29L6.2899 11.29C6.19886 11.3851 6.12749 11.4972 6.0799 11.62C5.97988 11.8635 5.97988 12.1365 6.0799 12.38C6.12749 12.5027 6.19886 12.6149 6.2899 12.71L11.2899 17.71C11.3829 17.8037 11.4935 17.8781 11.6153 17.9289C11.7372 17.9797 11.8679 18.0058 11.9999 18.0058C12.1319 18.0058 12.2626 17.9797 12.3845 17.9289C12.5063 17.8781 12.6169 17.8037 12.7099 17.71C12.8036 17.617 12.878 17.5064 12.9288 17.3846C12.9796 17.2627 13.0057 17.132 13.0057 17C13.0057 16.868 12.9796 16.7373 12.9288 16.6154C12.878 16.4936 12.8036 16.383 12.7099 16.29L9.4099 13H16.9999C17.2651 13 17.5195 12.8946 17.707 12.7071C17.8945 12.5196 17.9999 12.2652 17.9999 12C17.9999 11.7348 17.8945 11.4804 17.707 11.2929C17.5195 11.1054 17.2651 11 16.9999 11Z"
+                    />
+                    
+
+                  </svg>
+                  
+
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Previous Slide
+                  </span>
+                   
+                </button>
+                
+                  
+
+  
+                <button
+                  _keys="data-slider-next"
+                  class="ct-button ct-theme-dark ct-button--secondary ct-button--button ct-button--regular   ct-slider__controls__next"
+                  data-component-name="button"
+                  data-slider-next=""
+                >
+                  
+      
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Next 
+                  </span>
+                  <span
+                    class="ct-text-icon__group"
+                  >
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Slide
+                    </span>
+                     
+                    <svg
+                      aria-hidden="true"
+                      class="ct-icon ct-button__icon"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      
+
+                      <path
+                        d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+                      />
+                      
+
+                    </svg>
+                    
+
+                  </span>
+                </button>
+                
+                
+              </div>
+              
+
+                
+
+  
+  
+  
+    
+              <span
+                _keys="aria-live data-slider-progress"
+                aria-live="polite"
+                class="ct-tag ct-theme-dark ct-tag--primary    ct-slider__controls__progress-indicator"
+                data-slider-progress=""
+              >
+                    Slide 1  
+              </span>
+              
+              
+            </div>
+            
+                      
+          </div>
+          
+
+                                    
+          <div
+            class="ct-slider__content__bottom"
+          >
+            Bottom Content
+          </div>
+          
+                              
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Slider Component renders with only required attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    aria-label="Slider"
+    aria-roledescription="carousel"
+    class="ct-slider ct-theme-light   "
+    role="region"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+                                
+          
+          <div
+            class="ct-slider__container"
+            data-slider=""
+          >
+            
+                                      
+                          
+            <div
+              class="ct-slider__slides"
+              data-slider-panel=""
+            >
+              
+                
+              <div
+                class="ct-slider__slides__inner"
+                data-slider-rail=""
+              >
+                <div
+                  class="slide"
+                >
+                  Slide 1
+                </div>
+              </div>
+              
+              
+            </div>
+            
+            
+                          
+            <div
+              class="ct-slider__controls"
+            >
+              
+                
+              <div
+                class="ct-slider__controls__inner"
+              >
+                
+                  
+
+  
+                <button
+                  _keys="data-slider-previous"
+                  class="ct-button ct-theme-light ct-button--secondary ct-button--button ct-button--regular   ct-slider__controls__previous"
+                  data-component-name="button"
+                  data-slider-previous=""
+                >
+                  
+      
+                  <svg
+                    aria-hidden="true"
+                    class="ct-icon ct-button__icon"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    
+
+                    <path
+                      d="M16.9999 11H9.4099L12.7099 7.71C12.8982 7.52169 13.004 7.2663 13.004 7C13.004 6.7337 12.8982 6.4783 12.7099 6.29C12.5216 6.10169 12.2662 5.99591 11.9999 5.99591C11.7336 5.99591 11.4782 6.10169 11.2899 6.29L6.2899 11.29C6.19886 11.3851 6.12749 11.4972 6.0799 11.62C5.97988 11.8635 5.97988 12.1365 6.0799 12.38C6.12749 12.5027 6.19886 12.6149 6.2899 12.71L11.2899 17.71C11.3829 17.8037 11.4935 17.8781 11.6153 17.9289C11.7372 17.9797 11.8679 18.0058 11.9999 18.0058C12.1319 18.0058 12.2626 17.9797 12.3845 17.9289C12.5063 17.8781 12.6169 17.8037 12.7099 17.71C12.8036 17.617 12.878 17.5064 12.9288 17.3846C12.9796 17.2627 13.0057 17.132 13.0057 17C13.0057 16.868 12.9796 16.7373 12.9288 16.6154C12.878 16.4936 12.8036 16.383 12.7099 16.29L9.4099 13H16.9999C17.2651 13 17.5195 12.8946 17.707 12.7071C17.8945 12.5196 17.9999 12.2652 17.9999 12C17.9999 11.7348 17.8945 11.4804 17.707 11.2929C17.5195 11.1054 17.2651 11 16.9999 11Z"
+                    />
+                    
+
+                  </svg>
+                  
+
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Previous
+                  </span>
+                   
+                </button>
+                
+                  
+
+  
+                <button
+                  _keys="data-slider-next"
+                  class="ct-button ct-theme-light ct-button--secondary ct-button--button ct-button--regular   ct-slider__controls__next"
+                  data-component-name="button"
+                  data-slider-next=""
+                >
+                  
+      
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                     
+                  </span>
+                  <span
+                    class="ct-text-icon__group"
+                  >
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Next
+                    </span>
+                     
+                    <svg
+                      aria-hidden="true"
+                      class="ct-icon ct-button__icon"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      
+
+                      <path
+                        d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+                      />
+                      
+
+                    </svg>
+                    
+
+                  </span>
+                </button>
+                
+                
+              </div>
+              
+
+                
+
+  
+  
+  
+    
+              <span
+                _keys="aria-live data-slider-progress"
+                aria-live="polite"
+                class="ct-tag ct-theme-light ct-tag--primary    ct-slider__controls__progress-indicator"
+                data-slider-progress=""
+              >
+                    Slide 1  
+              </span>
+              
+              
+            </div>
+            
+                      
+          </div>
+          
+
+                                        
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Slider Component renders without some attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    aria-label="Slider Title"
+    aria-roledescription="carousel"
+    class="ct-slider ct-theme-light   "
+    role="region"
+  >
+    
+    
+    <div
+      class="container"
+    >
+      
+      
+      <div
+        class="row"
+      >
+        
+        
+        <div
+          class="col-xxs-12"
+        >
+          
+                                    
+          <div
+            class="ct-slider__content__top"
+          >
+            Top Content
+          </div>
+          
+                      
+          
+          <div
+            class="ct-slider__container"
+            data-slider=""
+          >
+            
+                                          
+
+
+  
+            <h2
+              class="ct-heading ct-theme-light ct-slider__title"
+            >
+              Slider Title
+            </h2>
+            
+                          
+                          
+            <div
+              class="ct-slider__slides"
+              data-slider-panel=""
+            >
+              
+                
+              <div
+                class="ct-slider__slides__inner"
+                data-slider-rail=""
+              >
+                <div
+                  class="slide"
+                >
+                  Slide 1
+                </div>
+              </div>
+              
+              
+            </div>
+            
+            
+                          
+            <div
+              class="ct-slider__controls"
+            >
+              
+                
+              <div
+                class="ct-slider__controls__inner"
+              >
+                
+                  
+
+  
+                <button
+                  _keys="data-slider-previous"
+                  class="ct-button ct-theme-light ct-button--secondary ct-button--button ct-button--regular   ct-slider__controls__previous"
+                  data-component-name="button"
+                  data-slider-previous=""
+                >
+                  
+      
+                  <svg
+                    aria-hidden="true"
+                    class="ct-icon ct-button__icon"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    
+
+                    <path
+                      d="M16.9999 11H9.4099L12.7099 7.71C12.8982 7.52169 13.004 7.2663 13.004 7C13.004 6.7337 12.8982 6.4783 12.7099 6.29C12.5216 6.10169 12.2662 5.99591 11.9999 5.99591C11.7336 5.99591 11.4782 6.10169 11.2899 6.29L6.2899 11.29C6.19886 11.3851 6.12749 11.4972 6.0799 11.62C5.97988 11.8635 5.97988 12.1365 6.0799 12.38C6.12749 12.5027 6.19886 12.6149 6.2899 12.71L11.2899 17.71C11.3829 17.8037 11.4935 17.8781 11.6153 17.9289C11.7372 17.9797 11.8679 18.0058 11.9999 18.0058C12.1319 18.0058 12.2626 17.9797 12.3845 17.9289C12.5063 17.8781 12.6169 17.8037 12.7099 17.71C12.8036 17.617 12.878 17.5064 12.9288 17.3846C12.9796 17.2627 13.0057 17.132 13.0057 17C13.0057 16.868 12.9796 16.7373 12.9288 16.6154C12.878 16.4936 12.8036 16.383 12.7099 16.29L9.4099 13H16.9999C17.2651 13 17.5195 12.8946 17.707 12.7071C17.8945 12.5196 17.9999 12.2652 17.9999 12C17.9999 11.7348 17.8945 11.4804 17.707 11.2929C17.5195 11.1054 17.2651 11 16.9999 11Z"
+                    />
+                    
+
+                  </svg>
+                  
+
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Previous Slide
+                  </span>
+                   
+                </button>
+                
+                  
+
+  
+                <button
+                  _keys="data-slider-next"
+                  class="ct-button ct-theme-light ct-button--secondary ct-button--button ct-button--regular   ct-slider__controls__next"
+                  data-component-name="button"
+                  data-slider-next=""
+                >
+                  
+      
+                  <span
+                    class="ct-text-icon__text"
+                  >
+                    Next 
+                  </span>
+                  <span
+                    class="ct-text-icon__group"
+                  >
+                    <span
+                      class="ct-text-icon__text"
+                    >
+                      Slide
+                    </span>
+                     
+                    <svg
+                      aria-hidden="true"
+                      class="ct-icon ct-button__icon"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      
+
+                      <path
+                        d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+                      />
+                      
+
+                    </svg>
+                    
+
+                  </span>
+                </button>
+                
+                
+              </div>
+              
+
+                
+
+  
+  
+  
+    
+              <span
+                _keys="aria-live data-slider-progress"
+                aria-live="polite"
+                class="ct-tag ct-theme-light ct-tag--primary    ct-slider__controls__progress-indicator"
+                data-slider-progress=""
+              >
+                    Slide 1  
+              </span>
+              
+              
+            </div>
+            
+                      
+          </div>
+          
+
+                                        
+        </div>
+        
+      
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;

package/components/03-organisms/slider/slide.test.js

@@ -0,0 +1,55 @@
+const template = 'components/03-organisms/slider/slide.twig';
+
+describe('Slide Component', () => {
+  test('renders with default heading level (h3)', async () => {
+    const c = await dom(template, {
+      title: 'Slide Title',
+      content: 'Slide content',
+    });
+
+    expect(c.querySelectorAll('.ct-slide')).toHaveLength(1);
+    expect(c.querySelector('.ct-slide__title').tagName).toBe('H3');
+    expect(c.querySelector('.ct-slide__title').textContent.trim()).toBe('Slide Title');
+    expect(c.querySelector('.ct-slide__title').hasAttribute('data-toc-exclude')).toBe(true);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with heading level 2 when heading_level is 2', async () => {
+    const c = await dom(template, {
+      title: 'Slide Title',
+      content: 'Slide content',
+      heading_level: 2,
+    });
+
+    expect(c.querySelector('.ct-slide__title').tagName).toBe('H2');
+    expect(c.querySelector('.ct-slide__title').textContent.trim()).toBe('Slide Title');
+    expect(c.querySelector('.ct-slide__title').hasAttribute('data-toc-exclude')).toBe(true);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with heading level 3 when heading_level is 3', async () => {
+    const c = await dom(template, {
+      title: 'Slide Title',
+      content: 'Slide content',
+      heading_level: 3,
+    });
+
+    expect(c.querySelector('.ct-slide__title').tagName).toBe('H3');
+    expect(c.querySelector('.ct-slide__title').textContent.trim()).toBe('Slide Title');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render heading when title is empty', async () => {
+    const c = await dom(template, {
+      content: 'Slide content',
+    });
+
+    expect(c.querySelectorAll('.ct-slide')).toHaveLength(1);
+    expect(c.querySelector('.ct-slide__title')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+});