@dta-au/civictheme-twig 1.13.1

package/components/03-organisms/slider/slide.twig

@@ -0,0 +1,168 @@
+{#
+/**
+ * @file
+ * CivicTheme Slider Slide component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - image_position: [string] Image position (left or right).
+ * - modifier_class: [string] Additional CSS classes.
+ * - image: [object] Slide image object.
+ *   Each property contains:
+ *   - url: [string] Image URL.
+ *   - alt: [string] Image alt text.
+ * - tags: [array] Tags array:
+ *   Each item contains:
+ *   - content: [string] Tag text.
+ *   - url: [string] Tag URL.
+ *   - is_new_window: [boolean] Whether to open tag in a new window.
+ * - date_iso: [string] Start date and time in ISO format.
+ * - date_end_iso: [string] Optional end date and time in ISO format.
+ * - links: [array] Link objects array:
+ *   Each item contains:
+ *   - text: [string] Link text.
+ *   - url: [string] Link URL.
+ *   - is_new_window: [boolean] Whether to open link in a new window.
+ *   - is_external: [boolean] Whether the link is external.
+ * - heading_level: [number] Heading level for the slide title (default 3).
+ * - date: [string] Start date and time.
+ * - date_end: [string] Optional end date and time.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - content_top: Top content area.
+ * - title: Slide title.
+ * - content: Content text.
+ * - content_bottom: Bottom slide content.
+ *
+ * Blocks:
+ * - image_block
+ * - content_top_block
+ * - tags_block
+ * - content_block
+ * - date_block
+ * - links_block
+ * - content_bottom_block
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+<div class="ct-slide {{ modifier_class -}}" role="group" aria-roledescription="slide" data-slider-slide {% if attributes is defined and attributes is not null %}{{ attributes -}}{% endif %}>
+  <div class="row ct-slide__row">
+    {% block image_block %}
+      {% if image is not empty %}
+        <div class="col-xxs-12 col-m-5 first {% if image_position == 'right' %}col-m-offset-1 last-m{% else %}first-m{% endif %}">
+          <div class="ct-slide__image">
+            {% include '@atoms/image/image.twig' with {
+              theme: theme,
+              url: image.url,
+              alt: image.alt,
+            } only %}
+          </div>
+        </div>
+      {% endif %}
+    {% endblock %}
+
+    <div class="col-xxs-12 col-m-5 col-m-offset-1 ct-flex-align-self-center">
+      <div class="ct-slide__inner">
+        {% block content_top_block %}
+          {% if content_top is not empty %}
+            <div class="ct-slide__content-top">
+              {{- content_top -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block tags_block %}
+          {% if tags %}
+            {% include '@molecules/tag-list/tag-list.twig' with {
+              theme: theme,
+              tags: tags,
+              modifier_class: 'ct-slide__tags',
+            } only %}
+          {% endif %}
+        {% endblock %}
+
+        {% block content_block %}
+          {% if title is not empty %}
+            {% include '@atoms/heading/heading.twig' with {
+              theme: theme,
+              content: title,
+              level: heading_level|default(3),
+              modifier_class: 'ct-slide__title',
+              attributes: create_attribute({'data-toc-exclude': ''}),
+            } only %}
+          {% endif %}
+
+          {% block date_block %}
+            {% if date is not empty %}
+              {% set date_content %}
+                {% include '@base/datetime/datetime.twig' with {
+                  start: date,
+                  start_iso: date_iso|default(null),
+                  end: date_end|default(null),
+                  end_iso: date_end_iso|default(null),
+                } only %}
+              {% endset %}
+
+              <div class="ct-slide__date">
+                {% include '@atoms/tag/tag.twig' with {
+                  theme: theme,
+                  type: date_end ? 'secondary' : 'tertiary',
+                  content: date_content,
+                  icon: date_end ? 'calendar-2' : null,
+                  icon_placement: 'before',
+                } only %}
+              </div>
+            {% endif %}
+          {% endblock %}
+
+          {% if content is not empty %}
+            {% include '@atoms/paragraph/paragraph.twig' with {
+              theme: theme,
+              content: content,
+              modifier_class: 'ct-slide__content',
+            } only %}
+          {% endif %}
+
+          {% block links_block %}
+            {% if links is not empty %}
+              {% set link_items = [] %}
+              {% for link in links %}
+                {% set link_item %}
+                  {% include '@atoms/button/button.twig' with {
+                    theme: theme,
+                    kind: 'link',
+                    type: loop.index == 1 ? 'primary' : 'secondary',
+                    text: link.text,
+                    url: link.url,
+                    is_external: link.is_external,
+                    is_new_window: link.is_new_window,
+                    modifier_class: 'ct-slide__links__link',
+                  } only %}
+                {% endset %}
+                {% set link_items = link_items|merge([link_item]) %}
+              {% endfor %}
+
+              {% include '@base/item-list/item-list.twig' with {
+                items: link_items,
+                size: 'small',
+                modifier_class: 'ct-slide__links',
+              } only %}
+            {% endif %}
+          {% endblock %}
+        {% endblock %}
+
+        {% block content_bottom_block %}
+          {% if content_bottom is not empty %}
+            <div class="ct-slide__content-bottom">
+              {{- content_bottom -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,159 @@
+/**
+ * CivicTheme Slider component.
+ */
+
+function CivicThemeSlider(el) {
+  if (el.getAttribute('data-slider') === 'true' || this.el) {
+    return;
+  }
+
+  this.el = el;
+
+  this.panel = this.el.querySelector('[data-slider-panel]');
+  this.rail = this.el.querySelector('[data-slider-rail]');
+  this.prev = this.el.querySelector('[data-slider-previous]');
+  this.next = this.el.querySelector('[data-slider-next]');
+  this.slides = this.el.querySelectorAll('[data-slider-slide]');
+  this.progressIndicator = this.el.querySelector('[data-slider-progress]');
+
+  this.prev.addEventListener('click', this.previousClick.bind(this));
+  this.next.addEventListener('click', this.nextClick.bind(this));
+  window.addEventListener('resize', this.refresh.bind(this));
+
+  this.currentSlide = 0;
+  this.totalSlides = this.slides.length;
+  this.animationTimeout = null;
+
+  this.updateProgress();
+  this.addSlideAriaAttributes();
+  this.hideAllSlidesExceptCurrent();
+
+  this.refresh();
+
+  // Refresh slider on font-load.
+  document.fonts.ready.then(() => {
+    requestAnimationFrame(() => {
+      this.refresh();
+    });
+  });
+}
+
+CivicThemeSlider.prototype.refresh = function () {
+  // Set slide width based on panel width.
+  const panelWidth = window.getComputedStyle(this.panel).width;
+  const panelWidthVal = parseFloat(panelWidth);
+
+  // Reset rail and panel height.
+  this.rail.style.height = '';
+  this.panel.style.height = '';
+
+  // Set the rail width.
+  this.rail.style.width = `${this.totalSlides * panelWidthVal}px`;
+
+  // Reset slide heights.
+  this.slides.forEach((slide) => {
+    slide.style.height = null;
+    slide.style.width = panelWidth;
+  });
+
+  // Show all slides temporarily to calculate heights.
+  this.slides.forEach((slide) => slide.removeAttribute('data-slider-slide-hidden'));
+
+  // Set slide position and find largest slide.
+  let largestHeight = 0;
+  this.slides.forEach((slide, idx) => {
+    slide.style.left = `${idx * panelWidthVal}px`;
+    const slideHeight = slide.offsetHeight;
+    if (slideHeight > largestHeight) {
+      largestHeight = slideHeight;
+    }
+  });
+  const largestHeightPx = `${largestHeight}px`;
+
+  // Resize all slides to the largest slide.
+  this.slides.forEach((slide) => {
+    slide.style.height = largestHeightPx;
+  });
+
+  this.hideAllSlidesExceptCurrent();
+
+  // Set heights based on largest slide height.
+  this.rail.style.height = largestHeightPx;
+  this.panel.style.height = largestHeightPx;
+};
+
+CivicThemeSlider.prototype.enableSlideInteraction = function () {
+  this.rail.querySelectorAll('a, button').forEach((link) => {
+    link.removeAttribute('tabindex');
+  });
+};
+
+CivicThemeSlider.prototype.addSlideAriaAttributes = function () {
+  this.slides.forEach((slide, idx) => {
+    slide.setAttribute('aria-label', `Slide ${idx + 1} of ${this.totalSlides}`);
+  });
+};
+
+CivicThemeSlider.prototype.disableSlideInteraction = function () {
+  this.rail.querySelectorAll('a, button').forEach((link) => {
+    link.setAttribute('tabindex', '-1');
+  });
+};
+
+CivicThemeSlider.prototype.hideAllSlidesExceptCurrent = function () {
+  this.slides.forEach((slide, idx) => {
+    if (idx !== this.currentSlide) {
+      slide.setAttribute('data-slider-slide-hidden', 'true');
+      slide.setAttribute('inert', true);
+    } else {
+      slide.removeAttribute('data-slider-slide-hidden');
+      slide.removeAttribute('inert');
+    }
+  });
+};
+
+CivicThemeSlider.prototype.updateDisplaySlide = function () {
+  const duration = parseFloat(window.getComputedStyle(this.rail).transitionDuration) * 1000;
+
+  this.disableSlideInteraction();
+  this.slides.forEach((slide) => slide.removeAttribute('data-slider-slide-hidden'));
+
+  // Reset timer and wait for animation to complete.
+  clearTimeout(this.animationTimeout);
+  this.animationTimeout = setTimeout(() => {
+    this.hideAllSlidesExceptCurrent();
+    this.enableSlideInteraction();
+  }, duration);
+};
+
+CivicThemeSlider.prototype.previousClick = function () {
+  // Go to last slide if current slide is the first slide.
+  if (this.currentSlide === 0) {
+    this.currentSlide = this.totalSlides - 1;
+  } else {
+    this.currentSlide--;
+  }
+  this.rail.style.left = `${this.currentSlide * -100}%`;
+  this.updateProgress();
+  this.updateDisplaySlide();
+};
+
+CivicThemeSlider.prototype.nextClick = function () {
+  // Go to first slide if current slide is the last slide.
+  if (this.currentSlide === (this.totalSlides - 1)) {
+    this.currentSlide = 0;
+  } else {
+    this.currentSlide++;
+  }
+  this.rail.style.left = `${this.currentSlide * -100}%`;
+  this.updateProgress();
+  this.updateDisplaySlide();
+};
+
+CivicThemeSlider.prototype.updateProgress = function () {
+  this.progressIndicator.innerHTML = `Slide ${this.currentSlide + 1} of ${this.totalSlides}`;
+};
+
+document.querySelectorAll('[data-slider]').forEach((slider) => {
+  new CivicThemeSlider(slider);
+});

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

@@ -0,0 +1,158 @@
+//
+// CivicTheme Slider component styles.
+//
+
+[data-slider] {
+  position: relative;
+}
+
+[data-slider-panel] {
+  position: relative;
+  overflow: hidden;
+}
+
+[data-slider-rail] {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  left: 0;
+  transition-property: left;
+
+  @if $ct-animation-enabled {
+    transition-duration: var(--ct-slider-mobile-transition);
+
+    @include ct-breakpoint(m) {
+      transition-duration: var(--ct-slider-desktop-transition);
+    }
+  }
+}
+
+.ct-slider {
+  $root: &;
+
+  &#{$root}--with-background {
+    padding-left: var(--ct-slider-space-horizontal);
+    padding-right: var(--ct-slider-space-horizontal);
+  }
+
+  #{$root}__title {
+    margin-bottom: ct-spacing(3);
+
+    @include ct-breakpoint(m) {
+      margin-bottom: ct-spacing(4);
+    }
+  }
+
+  #{$root}__slides {
+    @include ct-elevation(3);
+
+    & {
+      border-radius: var(--ct-slider-border-radius);
+    }
+  }
+
+  #{$root}__controls {
+    margin-top: ct-spacing(2);
+    text-align: center;
+
+    @include ct-breakpoint(m) {
+      display: flex;
+      align-items: center;
+      text-align: unset;
+    }
+  }
+
+  #{$root}__controls__inner {
+    display: flex;
+    gap: ct-spacing(2);
+  }
+
+  #{$root}__controls__previous,
+  #{$root}__controls__next {
+    padding-left: ct-spacing(2);
+    padding-right: ct-spacing(2);
+    width: calc(50% - #{ct-spacing()});
+
+    @include ct-breakpoint(m) {
+      width: auto;
+      min-width: ct-particle(20);
+    }
+  }
+
+  #{$root}__controls__progress-indicator {
+    padding: ct-spacing(0.5) ct-spacing();
+    margin-left: auto;
+    margin-top: ct-spacing(2);
+    text-align: center;
+    display: inline-block;
+
+    @include ct-breakpoint(m) {
+      display: block;
+      margin-top: 0;
+      text-align: left;
+    }
+  }
+
+  .ct-slide__title {
+    @include ct-typography('heading-2');
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    &#{$root}--with-background {
+      @include ct-component-property($root, $theme, background-color);
+    }
+  }
+}
+
+.ct-slide {
+  $root: &;
+
+  #{$root}__row {
+    @include ct-breakpoint(m) {
+      height: 100%;
+    }
+  }
+
+  #{$root}__inner {
+    padding: ct-spacing(4);
+
+    @include ct-breakpoint(m) {
+      padding: ct-particle(10) 0;
+    }
+  }
+
+  #{$root}__image {
+    height: var(--ct-slide-mobile-height);
+
+    @include ct-image-fit();
+
+    @include ct-breakpoint(m) {
+      @include ct-image-container-square();
+
+      padding: 0;
+      height: 100%;
+    }
+  }
+
+  #{$root}__content,
+  #{$root}__tags {
+    margin-bottom: ct-spacing(3);
+
+    @include ct-breakpoint(m) {
+      margin-bottom: ct-spacing(4);
+    }
+  }
+
+  #{$root}__date,
+  #{$root}__title {
+    margin-bottom: ct-spacing(3);
+
+    @include ct-breakpoint(m) {
+      margin-bottom: ct-spacing(2);
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property(ct-slider, $theme, slide, background-color);
+  }
+}

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

@@ -0,0 +1,90 @@
+/**
+ * CivicTheme Slider component stories.
+ */
+
+import Component from './slider.twig';
+
+import Slide from './slide.twig';
+
+const meta = {
+  title: 'Organisms/Slider',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    slides: {
+      control: { type: 'text' },
+    },
+    previous_label: {
+      control: { type: 'text' },
+    },
+    next_label: {
+      control: { type: 'text' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    with_background: {
+      control: { type: 'boolean' },
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Slider = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    theme: 'light',
+    title: 'Slider title',
+    slides: [1, 2, 3].map((idx) => Slide({
+      theme: 'light',
+      image: {
+        url: './demo/images/demo1.jpg',
+        alt: '',
+      },
+      image_position: 'before',
+      tags: [`Tag ${idx}`],
+      date: '20 Jan 2023 11:00',
+      date_iso: '',
+      date_end: '21 Jan 2023 09:00',
+      date_end_iso: '',
+      title: `Slide ${idx}`,
+      content: 'Content',
+      links: [
+        {
+          text: `Link ${idx}`,
+          url: 'https://example.com/',
+          is_new_window: false,
+          is_external: false,
+        },
+      ],
+      attributes: null,
+    }).trim()).join(''),
+    previous_label: 'Previous',
+    next_label: 'Next',
+    vertical_spacing: 'none',
+    with_background: false,
+    content_top: '',
+    content_bottom: '',
+    attributes: null,
+    modifier_class: '',
+  },
+};

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

@@ -0,0 +1,84 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/03-organisms/slider/slider.twig';
+
+describe('Slider Component', () => {
+  test('renders with only required attributes', async () => {
+    const c = await dom(template, {
+      slides: '<div class="slide">Slide 1</div>',
+    });
+
+    expect(c.querySelectorAll('.ct-slider')).toHaveLength(1);
+    expect(c.querySelector('.ct-slider__slides__inner').textContent.trim()).toBe('Slide 1');
+    expect(c.querySelector('.ct-slider__controls__previous').textContent.trim()).toBe('Previous');
+    expect(c.querySelector('.ct-slider__controls__next').textContent.trim()).toBe('Next');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with all attributes provided', async () => {
+    const c = await dom(template, {
+      content_top: 'Top Content',
+      title: 'Slider Title',
+      slides: '<div class="slide">Slide 1</div><div class="slide">Slide 2</div>',
+      previous_label: 'Previous Slide',
+      next_label: 'Next Slide',
+      content_bottom: 'Bottom Content',
+      theme: 'dark',
+      vertical_spacing: 'both',
+      with_background: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'additional-class',
+    });
+
+    expect(c.querySelectorAll('.ct-slider')).toHaveLength(1);
+    expect(c.querySelector('.ct-slider').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-slider').classList).toContain('ct-slider--with-background');
+    expect(c.querySelector('.ct-slider').classList).toContain('ct-vertical-spacing-inset--both');
+    expect(c.querySelector('.ct-slider').classList).toContain('additional-class');
+    expect(c.querySelector('.ct-slider__content__top').textContent.trim()).toBe('Top Content');
+    expect(c.querySelector('.ct-slider__title').textContent.trim()).toBe('Slider Title');
+    expect(c.querySelector('.ct-slider__slides__inner').textContent.trim()).toBe('Slide 1Slide 2');
+    expect(c.querySelector('.ct-slider__controls__previous').textContent.trim()).toBe('Previous Slide');
+    expect(c.querySelector('.ct-slider__controls__next').textContent.trim()).toBe('Next Slide');
+    expect(c.querySelector('.ct-slider__content__bottom').textContent.trim()).toBe('Bottom Content');
+    expect(c.querySelector('.ct-slider').getAttribute('data-test')).toBe('true');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders without some attributes', async () => {
+    const c = await dom(template, {
+      content_top: 'Top Content',
+      title: 'Slider Title',
+      slides: '<div class="slide">Slide 1</div>',
+      previous_label: 'Previous Slide',
+      next_label: 'Next Slide',
+      content_bottom: '',
+      theme: 'light',
+      vertical_spacing: '',
+      with_background: false,
+    });
+
+    expect(c.querySelectorAll('.ct-slider')).toHaveLength(1);
+    expect(c.querySelector('.ct-slider').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-slider').classList).not.toContain('ct-slider--with-background');
+    expect(c.querySelector('.ct-slider').classList).not.toContain('ct-vertical-spacing-inset--both');
+    expect(c.querySelector('.ct-slider__content__top').textContent.trim()).toBe('Top Content');
+    expect(c.querySelector('.ct-slider__title').textContent.trim()).toBe('Slider Title');
+    expect(c.querySelector('.ct-slider__slides__inner').textContent.trim()).toBe('Slide 1');
+    expect(c.querySelector('.ct-slider__controls__previous').textContent.trim()).toBe('Previous Slide');
+    expect(c.querySelector('.ct-slider__controls__next').textContent.trim()).toBe('Next Slide');
+    expect(c.querySelector('.ct-slider__content__bottom')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when slides are empty', async () => {
+    const c = await dom(template, {
+      slides: '',
+    });
+
+    expect(c.querySelectorAll('.ct-slider')).toHaveLength(0);
+  });
+});