@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,59 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/tooltip/tooltip.twig';
+
+describe('Tooltip Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      content: 'Tooltip content',
+    });
+
+    expect(c.querySelectorAll('.ct-tooltip')).toHaveLength(1);
+    expect(c.querySelector('.ct-tooltip__description__inner').textContent.trim()).toEqual('Tooltip content');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      content: 'Tooltip content',
+      theme: 'dark',
+      text: 'Tooltip text',
+      title: 'Tooltip title',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      icon: 'call',
+    });
+
+    const element = c.querySelector('.ct-tooltip');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+    expect(c.querySelector('.ct-tooltip__button').getAttribute('aria-label')).toEqual('Tooltip title');
+    expect(c.querySelector('.ct-tooltip__button').getAttribute('title')).toEqual('Tooltip title');
+    expect(c.querySelector('.ct-tooltip__description__inner').textContent.trim()).toEqual('Tooltip content');
+    expect(c.querySelector('.ct-icon')).not.toBeNull();
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when content is empty', async () => {
+    const c = await dom(template, {
+      content: '',
+    });
+
+    expect(c.querySelectorAll('.ct-tooltip')).toHaveLength(0);
+  });
+
+  test('renders with icon and icon size', async () => {
+    const c = await dom(template, {
+      content: 'Tooltip content',
+      icon: 'call',
+      icon_size: 'large',
+    });
+
+    expect(c.querySelector('.ct-icon.ct-icon--size-large')).not.toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+});

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

@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * CivicTheme Tooltip component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - position: [string] Tooltip position ('auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end').
+ * - icon: [string] Symbol to use in the button. Defaults to 'information-mark'.
+ * - icon_size: [string] Icon size ('extra-large', 'large', 'regular', 'small', 'extra-small'.)
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - title: Text used within the button title and for screen readers.
+ * - content: Text to display within the popup.
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+{% if content %}
+  <div class="ct-tooltip {{ modifier_class -}}" data-component-name="tooltip" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    <button class="ct-tooltip__button" {% if title %}aria-label="{{ title }}" title="{{ title }}"{% endif %} data-tooltip-button data-tooltip-position="{{ position }}">
+      {%- include '@base/icon/icon.twig' with {
+        symbol: icon|default('information-mark'),
+        size: icon_size|default('large'),
+      } only -%}
+    </button>
+
+    <div class="ct-tooltip__description" data-tooltip-content>
+      <div class="ct-tooltip__description__inner">
+        {{- content -}}
+      </div>
+      <div data-tooltip-close>
+        {%- include '@atoms/button/button.twig' with {
+          type: 'tertiary',
+          kind: 'button',
+          icon: 'cancel',
+          size: 'regular',
+        } only -%}
+      </div>
+
+      <div class="ct-tooltip__arrow" data-tooltip-arrow></div>
+    </div>
+  </div>
+{% endif %}

package/components/02-molecules/video-player/__snapshots__/video-player.test.js.snap

@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video Component does not render when sources, embedded_source, and raw_source are all empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Video Component renders with oEmbed iframe source 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-video-player ct-theme-light  "
+  >
+    
+          
+    <div
+      class="ct-video-player__wrapper"
+    >
+      
+                                                            
+
+
+
+      <iframe
+        allowfullscreen=""
+        class="ct-iframe ct-theme-light   "
+        data-chromatic="ignore"
+        height="315"
+        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+        title="Sample Video"
+        width="560"
+      />
+      
+              
+    </div>
+    
+    
+                
+  </div>
+  
+
+</div>
+`;
+
+exports[`Video Component renders with raw source 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-video-player ct-theme-light  "
+  >
+    
+          
+    <div
+      class="ct-video-player__wrapper"
+    >
+      
+                  
+      <iframe
+        height="315"
+        src="https://www.example.com"
+        width="560"
+      />
+      
+              
+    </div>
+    
+    
+                
+  </div>
+  
+
+</div>
+`;
+
+exports[`Video Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-video-player ct-theme-light  "
+  >
+    
+          
+    <div
+      class="ct-video-player__wrapper"
+    >
+      
+                  
+
+        
+  
+  
+        
+  
+  
+  
+  
+      <video
+        class="ct-video ct-theme-light "
+        controls=""
+      >
+        
+          
+        <source
+          src="video.mp4"
+          type="video/mp4"
+        />
+        
+        Your browser doesn't support HTML5 video.
+  
+      </video>
+      
+              
+    </div>
+    
+    
+                
+  </div>
+  
+
+</div>
+`;
+
+exports[`Video Component renders with transcript link 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-video-player ct-theme-light  "
+  >
+    
+          
+    <div
+      class="ct-video-player__wrapper"
+    >
+      
+                  
+
+        
+  
+  
+        
+  
+  
+  
+  
+      <video
+        class="ct-video ct-theme-light "
+        controls=""
+      >
+        
+          
+        <source
+          src="video.mp4"
+          type="video/mp4"
+        />
+        
+        Your browser doesn't support HTML5 video.
+  
+      </video>
+      
+              
+    </div>
+    
+    
+                  
+    <div
+      class="ct-video-player__transcript-block"
+    >
+      
+                      
+      <div
+        class="ct-video-player__links"
+      >
+        
+              
+        <div
+          class="ct-video-player__links-transcript"
+        >
+          
+                
+          <a
+            class="ct-link ct-theme-light"
+            href="transcript.html"
+            target="_blank"
+            title="Transcript"
+          >
+            
+      
+            <svg
+              aria-hidden="true"
+              class="ct-icon ct-link__icon"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              
+
+              <path
+                d="M21.9196 11.6C19.8996 6.91 16.0996 4 11.9996 4C7.89958 4 4.09958 6.91 2.07958 11.6C2.02452 11.7262 1.99609 11.8623 1.99609 12C1.99609 12.1377 2.02452 12.2738 2.07958 12.4C4.09958 17.09 7.89958 20 11.9996 20C16.0996 20 19.8996 17.09 21.9196 12.4C21.9746 12.2738 22.0031 12.1377 22.0031 12C22.0031 11.8623 21.9746 11.7262 21.9196 11.6ZM11.9996 18C8.82958 18 5.82958 15.71 4.09958 12C5.82958 8.29 8.82958 6 11.9996 6C15.1696 6 18.1696 8.29 19.8996 12C18.1696 15.71 15.1696 18 11.9996 18ZM11.9996 8C11.2085 8 10.4351 8.2346 9.7773 8.67412C9.1195 9.11365 8.60681 9.73836 8.30406 10.4693C8.00131 11.2002 7.9221 12.0044 8.07644 12.7804C8.23078 13.5563 8.61174 14.269 9.17115 14.8284C9.73056 15.3878 10.4433 15.7688 11.2192 15.9231C11.9951 16.0775 12.7994 15.9983 13.5303 15.6955C14.2612 15.3928 14.8859 14.8801 15.3255 14.2223C15.765 13.5645 15.9996 12.7911 15.9996 12C15.9996 10.9391 15.5782 9.92172 14.828 9.17157C14.0779 8.42143 13.0604 8 11.9996 8ZM11.9996 14C11.604 14 11.2173 13.8827 10.8884 13.6629C10.5595 13.4432 10.3032 13.1308 10.1518 12.7654C10.0004 12.3999 9.96084 11.9978 10.038 11.6098C10.1152 11.2219 10.3057 10.8655 10.5854 10.5858C10.8651 10.3061 11.2214 10.1156 11.6094 10.0384C11.9974 9.96126 12.3995 10.0009 12.7649 10.1522C13.1304 10.3036 13.4428 10.56 13.6625 10.8889C13.8823 11.2178 13.9996 11.6044 13.9996 12C13.9996 12.5304 13.7889 13.0391 13.4138 13.4142C13.0387 13.7893 12.53 14 11.9996 14Z"
+              />
+              
+
+            </svg>
+            
+
+            <span
+              class="ct-text-icon__text"
+            >
+              View Transcript
+            </span>
+             
+            <span
+              class="ct-visually-hidden"
+            >
+              (Opens in a new tab/window)
+            </span>
+          </a>
+                        
+        </div>
+        
+            
+      </div>
+      
+                            
+    </div>
+    
+            
+  </div>
+  
+
+</div>
+`;

package/components/02-molecules/video-player/video-player.scss

@@ -0,0 +1,75 @@
+//
+// CivicTheme Video Player component styles.
+//
+
+@use 'sass:math';
+
+.ct-video-player {
+  $root: &;
+
+  &__wrapper {
+    position: relative;
+    padding-bottom: calc(var(--ct-video-ratio-height) / var(--ct-video-ratio-width) * 100%);
+    padding-top: ct-spacing(3);
+    height: 0;
+    overflow: hidden;
+
+    iframe,
+    video {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__transcript-block {
+    display: flex;
+    flex-direction: column;
+    gap: ct-spacing(2);
+    margin-top: ct-spacing(4);
+
+    @include ct-breakpoint(m) {
+      margin-top: ct-spacing(3);
+    }
+  }
+
+  &__links-transcript {
+    padding-right: ct-spacing(2);
+
+    @include ct-breakpoint(m) {
+      padding-right: ct-spacing(3);
+    }
+  }
+
+  &__transcript[data-collapsible-collapsed=''] {
+    #{$root}__transcript-trigger-expand {
+      display: inline;
+    }
+    #{$root}__transcript-trigger-collapse {
+      display: none;
+    }
+  }
+
+  &__transcript-toggle {
+    &:hover {
+      #{$root}__transcript-trigger-expand,
+      #{$root}__transcript-trigger-collapse {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__transcript-trigger-expand {
+    display: none;
+  }
+
+  &__transcript-trigger-collapse {
+    display: inline;
+  }
+
+  &__transcript-panel-inner {
+    padding-top: ct-spacing(2);
+  }
+}

package/components/02-molecules/video-player/video-player.stories.js

@@ -0,0 +1,180 @@
+/**
+ * CivicTheme Video Player component stories.
+ */
+
+import Component from './video-player.twig';
+
+const meta = {
+  title: 'Molecules/Video Player',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    sources: {
+      control: { type: 'array' },
+    },
+    poster: {
+      control: { type: 'text' },
+    },
+    embedded_source: {
+      control: { type: 'text' },
+    },
+    raw_source: {
+      control: { type: 'text' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    width: {
+      control: { type: 'text' },
+    },
+    height: {
+      control: { type: 'text' },
+    },
+    transcript_link: {
+      control: { type: 'object' },
+    },
+    transcript_content: {
+      control: { type: 'text' },
+    },
+    transcript_expand_text: {
+      control: { type: 'text' },
+    },
+    transcript_collapse_text: {
+      control: { type: 'text' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Sources = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    title: '',
+    width: '550',
+    height: '400',
+    sources: [
+      {
+        url: 'demo/videos/demo.webm',
+        type: 'video/webm',
+      },
+      {
+        url: 'demo/videos/demo.mp4',
+        type: 'video/mp4',
+      },
+      {
+        url: 'demo/videos/demo.avi',
+        type: 'video/avi',
+      },
+    ],
+    poster: 'demo/videos/demo_poster.png',
+    embedded_source: '',
+    raw_source: '',
+    transcript_link: {
+      text: 'View transcript',
+      title: 'Open transcription in a new window',
+      url: 'https://example.com',
+      is_new_window: true,
+      is_external: false,
+      attributes: null,
+    },
+    vertical_spacing: 'none',
+    attributes: null,
+    modifier_class: '',
+  },
+};
+
+export const EmbeddedSource = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    title: 'Test video',
+    width: '550',
+    height: '400',
+    sources: null,
+    poster: '',
+    embedded_source: 'https://www.youtube.com/embed/C0DPdy98e4c',
+    raw_source: '',
+    transcript_link: {
+      text: 'View transcript',
+      title: 'Open transcription in a new window',
+      url: 'https://example.com',
+      is_new_window: true,
+      is_external: false,
+      attributes: null,
+    },
+    vertical_spacing: 'none',
+    attributes: null,
+    modifier_class: '',
+  },
+};
+
+export const RawSources = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    title: '',
+    width: '550',
+    height: '400',
+    sources: null,
+    poster: '',
+    embedded_source: '',
+    raw_source: '<iframe allowfullscreen="" frameborder="0" height="400" src="https://www.youtube.com/embed/C0DPdy98e4c" width="550"></iframe>',
+    transcript_link: {
+      text: 'View transcript',
+      title: 'Open transcription in a new window',
+      url: 'https://example.com',
+      is_new_window: true,
+      is_external: false,
+      attributes: null,
+    },
+    vertical_spacing: 'none',
+    attributes: null,
+    modifier_class: '',
+  },
+};
+
+export const TranscriptBlock = {
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    (Story) => `<div class="story-container"><div class="story-container__content">${Story()}</div></div>`,
+  ],
+  args: {
+    theme: 'light',
+    title: '',
+    width: '550',
+    height: '400',
+    sources: [
+      {
+        url: 'demo/videos/demo.mp4',
+        type: 'video/mp4',
+      },
+    ],
+    poster: 'demo/videos/demo_poster.png',
+    transcript_content: 'Reprehenderit sed irure dolor nisi ut consectetur exercitation aliquip commodo mollit velit est voluptate ut sint cillum est dolor ullamco reprehenderit in.',
+    transcript_expand_text: 'Show transcript',
+    transcript_collapse_text: 'Hide transcript',
+    vertical_spacing: 'none',
+    attributes: null,
+    modifier_class: '',
+  },
+};

package/components/02-molecules/video-player/video-player.test.js

@@ -0,0 +1,81 @@
+const template = 'components/02-molecules/video-player/video-player.twig';
+
+describe('Video Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      sources: [
+        { url: 'video.mp4', type: 'video/mp4' },
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-video-player')).toHaveLength(1);
+    expect(c.querySelector('video')).not.toBeNull();
+    expect(c.querySelector('video source').getAttribute('src')).toEqual('video.mp4');
+    expect(c.querySelector('video source').getAttribute('type')).toEqual('video/mp4');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with oEmbed iframe source', async () => {
+    const c = await dom(template, {
+      embedded_source: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+      title: 'Sample Video',
+      width: '560',
+      height: '315',
+    });
+
+    expect(c.querySelectorAll('.ct-video-player')).toHaveLength(1);
+    const iframe = c.querySelector('iframe');
+    expect(iframe).not.toBeNull();
+    expect(iframe.getAttribute('src')).toEqual('https://www.youtube.com/embed/dQw4w9WgXcQ');
+    expect(iframe.getAttribute('title')).toEqual('Sample Video');
+    expect(iframe.getAttribute('width')).toEqual('560');
+    expect(iframe.getAttribute('height')).toEqual('315');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with raw source', async () => {
+    const c = await dom(template, {
+      raw_source: '<iframe src="https://www.example.com" width="560" height="315"></iframe>',
+    });
+
+    expect(c.querySelectorAll('.ct-video-player')).toHaveLength(1);
+    const iframe = c.querySelector('iframe');
+    expect(iframe).not.toBeNull();
+    expect(iframe.getAttribute('src')).toEqual('https://www.example.com');
+    expect(iframe.getAttribute('width')).toEqual('560');
+    expect(iframe.getAttribute('height')).toEqual('315');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with transcript link', async () => {
+    const c = await dom(template, {
+      sources: [
+        { url: 'video.mp4', type: 'video/mp4' },
+      ],
+      transcript_link: {
+        url: 'transcript.html',
+        text: 'View Transcript',
+        title: 'Transcript',
+        is_new_window: true,
+        is_external: false,
+      },
+    });
+
+    expect(c.querySelectorAll('.ct-video-player')).toHaveLength(1);
+    const transcriptLink = c.querySelector('.ct-video-player__links-transcript a');
+    expect(transcriptLink).not.toBeNull();
+    expect(transcriptLink.getAttribute('href')).toEqual('transcript.html');
+    expect(transcriptLink.textContent.trim()).toContain('View Transcript');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when sources, embedded_source, and raw_source are all empty', async () => {
+    const c = await dom(template, {});
+
+    expect(c.querySelectorAll('.ct-video-player')).toHaveLength(0);
+  });
+});